@extends('backend.layouts.app-backend')

@section('content')

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Edit Flyers</h2>
        <ol class="breadcrumb">
            <li>
                <a href="{{route('admin.dashboard')}}">Dashboard</a>
            </li>
            <li>
                <a href="{{route('admin.flyers-ads.index')}}">list</a>
            </li>
            <li class="active">
                <strong>Edit Flyers</strong>
            </li>
        </ol>
    </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">

    @include('layouts.message')

    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>Add Flyers from the following form.</h5>
        </div>
        <div class="ibox-content">
            <form method="POST" enctype="multipart/form-data" id="flyersForm">
                
                @csrf()

                <div class="ad-details">
                    
                    <h3><strong>1. Flyers Details</strong></h3>

                    <div class="form-group">
                        <label>Business address</label>
                        <input type="text" class="form-control" id="inputTitle" name="title" placeholder="Enter  title" value="{{ $flyers->title }}">
                    </div>

                       
                 
                    <div class="form-group">

                        <label>Business Logo</label> <br>

                        <div class="fileinput @if( isset( $flyers->featured_image ) ) fileinput-exists @else fileinput-new @endif" data-provides="fileinput">
                            <div class="fileinput-preview fileinput-exists thumbnail">
                                @if( isset( $flyers->featured_image ) ) 
                                  <img src="{{asset('flyers/'.$flyers->featured_image)}}">
                                @endif
                            </div>
                            <div>
                              <span class="btn btn-primary btn-file">
                                  <span class="fileinput-new">Select Image</span>
                                  <span class="fileinput-exists">Change</span>
                                  <input type="hidden" name="featured_image" value="{{ $flyers->featured_image }}">
                                  <input id="featured_image" name="featured_image" type="file" class="form-control" accept="image/*"/>
                              </span>
                              <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                            </div>
                        </div>

                    </div>
                  
                </div> 
                    
             
                <div class="ad-details">
                    
                    <h3><strong>2. Contact Info</strong></h3>
     
                    <div class="form-row row">
                        <div class="form-group col-md-6">
                            <label>Business Name </label>
                            <input name="contact_name" type="text" class="form-control" value="{{ $flyers->contact_name }}">
                        </div>

                        <div class="form-group col-md-6">
                            <label>Email </label>
                            <input name="email" type="text" class="form-control" value="{{ $flyers->email }}">
                        </div>

                        <div class="form-group col-md-6">
                            <label>Phone </label>
                            <input name="phone" type="text" class="form-control" value="{{ $flyers->phone }}">
                        </div>
                    </div>

                </div>
                
                <div class="ad-details">
                    
                    <h4 class="post-sub-title">3. Flyer Option A - 1 or 2 Page Flyer</h4>

                    <div class="form-check">
                        <input name="flyers_option_1" type="checkbox" class="form-check-input" id="flyerOptionA" value="1" {{ $flyers->flyers_option_1 == 1 ? 'checked' : '' }}>
                        <label class="form-check-label" for="flyerOptionA">Choose Option A</label>
                    </div>

                    <div class="form-row flyers-options-a" style="display:none;">
                        <div class="form-group col-md-6">
                            <label for="">Flyers Start date</label>
                            <input type="text" class="form-control" id="flyersdatetimepickerfrom" name="event_start_date" value="{{ $flyers->event_start_date }}" placeholder="YYYY-MM-DD" autocomplete="off" readonly>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="">Flyers End date</label>
                            <input type="text" class="form-control" id="flyersdatetimepickerto" name="event_end_date" value="{{ $flyers->event_end_date }}" placeholder="YYYY-MM-DD" autocomplete="off" readonly>    
                        </div>
                    </div>

                    <div class="form-row flyers-list-1-container flyers-options-a" {!! $flyers->flyers_option_1 == 1 ? '' : 'style="display:none;"' !!}>
                         
                        @if( isset( $menuList1 ) && count( $menuList1 ) > 0 )

                            @foreach( $menuList1 as $key => $list1)

                                <div class="row flyers-list-1-wrapper" style="margin-left: 3px;">
                                    <div class="form-group col-md-3">

                                        <label>Flyers Image</label> <br>

                                        <div class="fileinput @if( isset( $list1->image ) ) fileinput-exists @else fileinput-new @endif" data-provides="fileinput">
                                            <div class="fileinput-preview fileinput-exists thumbnail">
                                              @if( isset( $list1->image ) ) 
                                                  <img src="{{asset('flyers/'.$list1->image)}}">
                                                @endif
                                            </div>
                                            <div>
                                              <span class="btn btn-primary btn-file">
                                                  <span class="fileinput-new">Select Image</span>
                                                  <span class="fileinput-exists">Change</span>
                                                  <input type="hidden" name="flyers_option_a[{{$key+1}}][image]" value="{{ $list1->image }}">
                                                  <input  name="flyers_option_a[{{$key+1}}][image]" type="file" class="form-control" accept="image/*"/>
                                              </span>
                                              <a href="javascript:void(0);" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="form-group col-md-2">
                                        <a href="javascript:void(0);" class="remove-flyers-list-1 btn btn-danger btn-sm">Remove Row</a>
                                    </div>
                            
                                </div>

                                <div class="flyers-list-1-remove-line{{$key+1}} hr-line-dashed"></div>

                            @endforeach

                        @else

                            <div class="row flyers-list-1-wrapper" style="margin-left: 3px;">
                                <div class="form-group col-md-3">

                                    <label>Flyers Image</label> <br>

                                    <div class="fileinput fileinput-new" data-provides="fileinput">
                                        <div class="fileinput-preview fileinput-exists thumbnail">
                                         
                                        </div>
                                        <div>
                                          <span class="btn btn-primary btn-file">
                                              <span class="fileinput-new">Select Image</span>
                                              <span class="fileinput-exists">Change</span>
                                              <input type="hidden" name="flyers_option_a[1][image]" value="">
                                              <input  name="flyers_option_a[1][image]" type="file" class="form-control" accept="image/*"/>
                                          </span>
                                          <a href="javascript:void(0);" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                                        </div>
                                    </div>

                                </div>
                                
                            </div>

                        @endif
                        
                        <div class="hr-line-dashed"></div>

                    </div>
                
                    <div class="form-group flyers-options-a" {!! $flyers->flyers_option_1 == 1 ? '' : 'style="display:none;"' !!}>
                        <button type="button" class="btn btn-primary add-new-flyers-list-1">Add new</button>
                    </div>
                
                </div>
    

            <div class="ad-details">
                <h4 class="post-sub-title">4. Flyer Option B - Coupon</h4>
                <div class="form-check">
                    <input name="flyers_option_2" type="checkbox" class="form-check-input" id="flyerOptionB" value="1" {{ $flyers->flyers_option_2 == 1 ? 'checked' : '' }}>
                    <label class="form-check-label" for="flyerOptionB">Choose Option B</label>
                </div>
                <div class="form-row flyers-options-b" style="display:none;">
                    <div class="form-group col-md-6">
                        <label for="">Coupon Start Date</label>
                        <input type="text" class="form-control" id="flyerscoupondatetimepickerfrom" name="coupon_start_date" value="{{ $flyers->coupon_start_date }}" placeholder="YYYY-MM-DD" autocomplete="off" readonly>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="">Coupon End Date</label>
                        <input type="text" class="form-control" id="flyerscoupondatetimepickerto" name="coupon_end_date" value="{{ $flyers->coupon_end_date }}" placeholder="YYYY-MM-DD" autocomplete="off" readonly>    
                    </div>
                </div>

                <div class="form-row flyers-list-2-container flyers-options-b" {!! $flyers->flyers_option_2 == 1 ? '' : 'style="display:none;"' !!}>
                     

                       @if( isset( $menuList2 ) && count( $menuList2 ) > 0 )

                            @foreach( $menuList2 as $key1 => $list2)

                                <div class="row flyers-list-2-wrapper" style="margin-left:3px;">
                                    
                                    <div class="form-group col-md-3">

                                        <label>Coupon Image</label><br>

                                        <div class="fileinput @if( isset( $list2->image ) ) fileinput-exists @else fileinput-new @endif" data-provides="fileinput">
                                            <div class="fileinput-preview fileinput-exists thumbnail">
                                                 @if( isset( $list2->image ) ) 
                                                  <img src="{{asset('flyers/'.$list2->image)}}">
                                                @endif
                                            </div>
                                            <div>
                                              <span class="btn btn-primary btn-file">
                                                  <span class="fileinput-new">Select Image</span>
                                                  <span class="fileinput-exists">Change</span>
                                                  <input type="hidden" name="flyers_option_b[{{$key1+1}}][image]" value="{{ $list2->image }}">
                                                  <input  name="flyers_option_b[{{$key1+1}}][image]" type="file" class="form-control" accept="image/*" />
                                              </span>
                                              <a href="javascript:void(0);" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="form-group col-md-2">
                                        <a href="javascript:void(0);" class="remove-flyers-list-2 btn btn-danger btn-sm">Remove Row</a>
                                    </div>
                                    
                                </div>

                                <div class="flyers-list-2-remove-line{{$key1+1}} hr-line-dashed"></div>    

                            @endforeach

                        @else

                            <div class="row flyers-list-2-wrapper" style="margin-left:3px;">
                                
                                <div class="form-group col-md-3">

                                    <label>Coupon Image</label><br>

                                    <div class="fileinput fileinput-new" data-provides="fileinput">
                                        <div class="fileinput-preview fileinput-exists thumbnail">
                                         
                                        </div>
                                        <div>
                                          <span class="btn btn-primary btn-file">
                                              <span class="fileinput-new">Select Image</span>
                                              <span class="fileinput-exists">Change</span>
                                              <input type="hidden" name="flyers_option_b[1][image]" value="">
                                              <input  name="flyers_option_b[1][image]" type="file" class="form-control" accept="image/*" />
                                          </span>
                                          <a href="javascript:void(0);" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                                        </div>
                                    </div>

                                </div>
                                
                            </div>

                        @endif

                    <div class="hr-line-dashed"></div>

                </div>

               <div class="form-group flyers-options-b" {!! $flyers->flyers_option_2 == 1 ? '' : 'style="display:none;"' !!}>
                    <button type="button" class="btn btn-primary add-new-flyers-list-2">Add new</button>
                </div>
            </div>

            <div class="ad-details">
                <h4 class="post-sub-title">5. Flyer Option C - Multiple Page Flyer</h4>
                <div class="form-check">
                    <input name="flyers_option_3" type="checkbox" class="form-check-input" id="flyerOptionC" value="1" {{ $flyers->flyers_option_3 == 1 ? 'checked' : '' }}>
                    <label class="form-check-label" for="flyerOptionC">Choose Option C</label>
                </div>
                <div class="form-row flyers-options-c" style="display:none;">
                    <div class="form-group col-md-6">
                        <label for="">Start date</label>
                        <input type="text" class="form-control" id="flyersoptoincdatetimepickerfrom" name="option_c_start_date" value="{{ $flyers->option_c_start_date }}" placeholder="YYYY-MM-DD" autocomplete="off" readonly>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="">End date</label>
                        <input type="text" class="form-control" id="flyersoptoincdatetimepickerto" name="option_c_end_date" value="{{ $flyers->option_c_end_date }}" placeholder="YYYY-MM-DD" autocomplete="off" readonly>    
                    </div>
                </div>

                <div class="form-row flyers-list-3-container flyers-options-c" {!! $flyers->flyers_option_3 == 1 ? '' : 'style="display:none;"' !!}>
                     
                      @if( isset( $menuList3 ) && count( $menuList3 ) > 0 )

                            @foreach( $menuList3 as $key2 => $list3)


                                <div class="row flyers-list-3-wrapper" style="margin-left;">
                                
                                    <div class="form-group col-md-3">

                                        <label>Flyers Image</label><br>

                                         <div class="fileinput @if( isset( $list3->image ) ) fileinput-exists @else fileinput-new @endif" data-provides="fileinput">
                                            <div class="fileinput-preview fileinput-exists thumbnail">
                                              @if( isset( $list3->image ) ) 
                                                  <img src="{{asset('flyers/'.$list3->image)}}">
                                                @endif
                                            </div>
                                            <div>
                                              <span class="btn btn-primary btn-file">
                                                  <span class="fileinput-new">Select Image</span>
                                                  <span class="fileinput-exists">Change</span>
                                                  <input type="hidden" name="flyers_option_c[{{$key2+1}}][image]" value="{{ $list3->image }}">
                                                  <input  name="flyers_option_c[{{$key2+1}}][image]" type="file" class="form-control" accept="image/*"/>
                                              </span>
                                              <a href="javascript:void(0);" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                                            </div>
                                        </div>

                                    </div>

                                </div>

                            @endforeach
                    @else

                            <div class="row flyers-list-3-wrapper" style="margin-left;">
                                
                                    <div class="form-group col-md-3">

                                        <label>Flyers Image</label><br>

                                        <div class="fileinput fileinput-new" data-provides="fileinput">
                                            <div class="fileinput-preview fileinput-exists thumbnail">
                                             
                                            </div>
                                            <div>
                                              <span class="btn btn-primary btn-file">
                                                  <span class="fileinput-new">Select Image</span>
                                                  <span class="fileinput-exists">Change</span>
                                                  <input type="hidden" name="flyers_option_c[1][image]" value="">
                                                  <input  name="flyers_option_c[1][image]" type="file" class="form-control" accept="image/*"/>
                                              </span>
                                              <a href="javascript:void(0);" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                                            </div>
                                        </div>

                                    </div>

                                </div>

                    @endif

                </div>
             
                <div class="form-group flyers-options-c col-md-6" {!! $flyers->flyers_option_3 == 1 ? '' : 'style="display:none;"' !!}>
                     <label>Enable Multiple page</label><br>
                    <div class="form-check multiple-page-enable form-check-inline">
                        <input type="radio" name="multiple_page_enable" class="form-check-input" id="enableMultiplePageYes" value="1" {{ $flyers->multiple_page_enable == 1 ? 'checked' : '' }}>
                        <label class="form-check-label" for="enableMultiplePageYes">Yes</label>
                    </div>

                    <div class="form-check multiple-page-enable form-check-inline">
                        <input type="radio" name="multiple_page_enable" class="form-check-input" id="enableMultiplePageYes" value="0" {{ $flyers->multiple_page_enable == 0 ? 'checked' : '' }}>
                        <label class="form-check-label" for="enableMultiplePageYes">No</label>
                    </div>
                </div>

              
                    <div class="form-group flyers-options-c col-md-6" {!! $flyers->flyers_option_3 == 1 ? '' : 'style="display:none;"' !!}>
                        <label for="inputWebsite">Website Link to Flyer</label>
                        <input type="text" class="form-control" id="inputWebsite" name="website" value="{{ $flyers->website  }}">
                    </div>
              
                </div>

                <div class="ad-details">
                    
                    <h3><strong>6. Promote Your Ad</strong></h3>
                    
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="">Post Start date</label>
                            <input type="text" class="form-control" id="flyerspostdatetimepickerfrom" name="post_start_date" value="{{ date('Y-m-d', strtotime( $flyers->approved_date ) )  }}" placeholder="YYYY-MM-DD" autocomplete="off">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="">Post End date</label>
                            <input type="text" class="form-control" id="flyerspostdatetimepickerto" name="post_end_date" value="{{ date('Y-m-d', strtotime( $flyers->expiry_date ) ) }}" placeholder="YYYY-MM-DD" autocomplete="off">
                        </div>
                    </div>

                    <div class="form-row row">
                        <div class="form-group col-md-4">
                            <label for="inputTitle">Packages</label>
                            <select name="promote_ad_type" class="form-control">
                                <option value="">--Select Package--</option>
                                @if(isset($adSettings) && count($adSettings))
                                    @foreach($adSettings as $adS)
                                        <option value="{{$adS->id}}" {{$adS->id == $flyers->promote_ad_type ? 'selected' : ''}}>{{$adS->title}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>

                        <div class="form-group col-md-4">
                            <label for="inputTitle">Duration/Day</label>
                            <input name="promote_ad_type_duration" type="text" class="form-control" value="{{ $flyers->promote_ad_type_duration ?? ''}}" readonly="readonly">
                        </div>

                        <div class="form-group col-md-4">
                            <label for="inputTitle">Price($) (per day)</label>
                            <input name="promote_ad_type_price" type="text" class="form-control" value="{{$adSetting->adsettingrelation[0]->price ?? ''}}" readonly="readonly">
                        </div>
                    </div>
                </div> 
         
                <div class="ad-details">
                    
                    <h3><strong>7.Status</strong></h3>
        
                    <div class="form-group">
                        <label>Ad Status </label>
                        <select name="status" class="form-control">
                            <option value="4" {{$flyers->status == 4 ? 'selected' : ''}}>Unpublished</option>
                            <option value="1" {{$flyers->status == 1 ? 'selected' : ''}}>Published/Approved</option>
                            <option value="0" {{$flyers->status == 0 ? 'selected' : ''}}>Pending</option>
                            <option value="2" {{$flyers->status == 2 ? 'selected' : ''}}>Rejected</option>
                            <option value="3" {{$flyers->status == 3 ? 'selected' : ''}}>Review</option>
                        </select>
                    </div>                  

                </div>

                <div class="form-group" style="margin-bottom: 50px;margin-left: -15px;">
                    <div class="col-sm-4">
                        <button class="btn btn-primary" type="button" id="flyersButton">Save</button>
                    </div>
                </div>


            </form>
        </div>
    </div>
      
</div>
@endsection

@section('header-style')
<link href="{{ asset('backend/jasny-bootstrap/css/jasny-bootstrap.css')}}" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" rel="stylesheet" />
<style type="text/css">
    .flyers-list-1-wrapper, .flyers-list-2-wrapper, .flyers-list-3-wrapper{
        margin-left: 3px;
    }
    .form-check-inline{
        display: inline-block;
    }
</style>
@stop

@section('footer-scripts')
<script type="text/javascript" src="{{ asset('backend/jasny-bootstrap/js/jasny-bootstrap.js') }}"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<script type="text/javascript">

$("#flyersButton").on('click',function(e){

    e.preventDefault();

    $("span.uk-text-danger").remove();

    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('input[name="_token"]').val()
      }
    });

    var form     = document.forms.namedItem("flyersForm"); // high importance!, here you need change "yourformname" with the name of your form

    var formData = new FormData(form); // high importance!

    var self     = $(this);

    $.ajax({
        url: "{{route('admin.flyers-ads.update',$flyers->id)}}",
        processData: false,
        contentType: false,
        cache: false,
        method: 'POST',
        data: formData,
        beforeSend: function(){

            self.text('Saving..');

            self.attr('disabled','disabled');

        },
        success: function(data){
            
             window.location.replace("{{route('admin.flyers-ads.index')}}");
            
        },
        error: function(jqXhr, json, errorThrown){
            
            self.text('Save');

            self.removeAttr('disabled');
            
            var errors = jqXhr.responseJSON;

            $.each(errors['errors'], function (index, value) {

               if(index == 'province_id' || index == 'promote_ad_type'){
                    $('#flyersForm select[name='+index+']').after('<span class="uk-form-label uk-text-danger">'+value+'</span>');
                }
               
                else{
                    $('#flyersForm input[name='+index+']').after('<span class="uk-form-label uk-text-danger">'+value+'</span>');
                }
            });

            $("html, body").animate({
                scrollTop: 0
            }, 9000);
        }
    });
});



$(function () {


    $("#flyerspostdatetimepickerfrom").datepicker({
        dateFormat: "yy-mm-dd",
        minDate: 0,
        onSelect: function () {
            
            var dt1     = $('#flyerspostdatetimepickerto');

            var maxdate = dt1.datepicker('getDate');
            
            var minDate = $(this).datepicker('getDate');
            
            dt1.datepicker('option', 'minDate', minDate);
            
            dt1.datepicker('option', 'dateFormat', 'yy-mm-dd');

            dt1.val('');
        }
    });

   $('#flyerspostdatetimepickerto').datepicker({
        dateFormat: "yy-mm-dd",
        minDate: 0,
          onSelect: function () {

            var start_date          = $('#flyerspostdatetimepickerfrom').datepicker('getDate');
            var end_date            = $('#flyerspostdatetimepickerto').datepicker('getDate');
            var dateDiff            = (end_date - start_date)/(86400 * 1000);
            var totalDateDiff       = dateDiff + 1;
            if(totalDateDiff > 1)
            {
                $("input[name=promote_ad_type_duration]").val(totalDateDiff);
            }
            else
            {
                $("input[name=promote_ad_type_duration]").val(totalDateDiff);   
            }
        }
    });


    $("select[name=promote_ad_type]").on('change',function(){
        var ad_setting_id       = $(this).val();
         $.ajax({
            url: "{{route('admin.flyers.getSettingPriceById')}}",
            method: 'get',
            data: {ad_setting_id:ad_setting_id},
            success: function(data)
            {
                var start_date          = $('#flyerspostdatetimepickerfrom').datepicker('getDate');
                var end_date            = $('#flyerspostdatetimepickerto').datepicker('getDate');
                var dateDiff            = (end_date - start_date)/(86400 * 1000);
                var totalDateDiff       = dateDiff + 1;
                if(totalDateDiff > 1)
                {
                    $("input[name=promote_ad_type_duration]").val(totalDateDiff);
                }
                else
                {
                    $("input[name=promote_ad_type_duration]").val(totalDateDiff);   
                }

                $("input[name=promote_ad_type_price]").val(data.flyers_price);
            }
        });

    });
});


$("#flyerOptionA").on('click',function(){
        console.log( $(this).prop("checked") );
        if( $(this).prop("checked") )
        {
            $(".flyers-options-a").show();
        }
        else
        {
            $(".flyers-options-a").hide();   
        }
});


$("#flyerOptionB").on('click',function(){
    console.log( $(this).prop("checked") );
    if( $(this).prop("checked") )
    {
        $(".flyers-options-b").show();
    }
    else
    {
        $(".flyers-options-b").hide();   
    }
});

$("#flyerOptionC").on('click',function(){
    console.log( $(this).prop("checked") );
    if( $(this).prop("checked") )
    {
        $(".flyers-options-c").show();
    }
    else
    {
        $(".flyers-options-c").hide();   
    }
});


// Flyers option 1
var flyecnt = $('.flyers-list-1-container').children().length;

$('.add-new-flyers-list-1').on('click', function() {

    flyecnt++;
    var icontainer = ` <div class="flyers-list-1-wrapper row" style="margin-left:3px;">


                    <div class="form-group col-md-3">

                        <label>Flyers Image</label> <br>

                        <div class="fileinput fileinput-new" data-provides="fileinput">
                            <div class="fileinput-preview fileinput-exists thumbnail">
                             
                            </div>
                            <div>
                              <span class="btn btn-primary btn-file">
                                  <span class="fileinput-new">Select Image</span>
                                  <span class="fileinput-exists">Change</span>
                                  <input type="hidden" name="flyers_option_a[${flyecnt}][image]" value="">
                                  <input name="flyers_option_a[${flyecnt}][image]" type="file" class="form-control" accept="image/*"/>
                              </span>
                              <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                            </div>
                        </div>

                    </div>

                    <div class="form-group col-md-2">
                        <a href="javascript:void(0);" class="remove-flyers-list-1 btn btn-danger btn-sm">Remove Row</a>
                    </div>


                </div><div class="flyers-list-1-remove-line${flyecnt} hr-line-dashed"></div>`;

    $('.flyers-list-1-container').append(icontainer);

    $(".remove-flyers-list-1").on('click',function(){
       $(this).parent().parent().remove();
       $(`.flyers-list-1-remove-line${flyecnt}`).remove();
       flyecnt--;
    });
});

$(".remove-flyers-list-1").on('click',function(){
    $(this).parent().parent().remove();
    $(`.flyers-list-1-remove-line${flyecnt}`).remove();
    flyecnt--;
});


// Flyers option B
var flyecnt1 = $('.flyers-list-2-container').children().length;

$('.add-new-flyers-list-2').on('click', function() {

    flyecnt1++;
    var icontainer = ` <div class="flyers-list-2-wrapper row" style="margin-left:3px;">

                    <div class="form-group col-md-3">

                        <label>Coupon Image</label> <br>

                        <div class="fileinput fileinput-new" data-provides="fileinput">
                            <div class="fileinput-preview fileinput-exists thumbnail">
                             
                            </div>
                            <div>
                              <span class="btn btn-primary btn-file">
                                  <span class="fileinput-new">Select Image</span>
                                  <span class="fileinput-exists">Change</span>
                                  <input type="hidden" name="flyers_option_b[${flyecnt1}][image]" value="">
                                  <input name="flyers_option_b[${flyecnt1}][image]" type="file" class="form-control" accept="image/*"/>
                              </span>
                              <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove row</a>
                            </div>
                        </div>

                    </div>

                    <div class="form-group col-md-2">
                        <a href="javascript:void(0);" class="remove-flyers-list-2 btn btn-danger btn-sm" style="margin-top: 15px;">Remove Row</a>
                    </div>
                </div><div class="flyers-list-2-remove-line${flyecnt1} hr-line-dashed"></div>`;

    $('.flyers-list-2-container').append(icontainer);

    $(".remove-flyers-list-2").on('click',function(){
       $(this).parent().parent().remove();
       $(`.flyers-list-2-remove-line${flyecnt1}`).remove();
       flyecnt1--;
    });
});


$(".remove-flyers-list-2").on('click',function(){
    $(this).parent().parent().remove();
    $(`.flyers-list-2-remove-line${flyecnt1}`).remove();
    flyecnt1--;
});


 // Flyers option c
var flyecnt2 = $('.flyers-list-3-container').children().length;

$('.add-new-flyers-list-3').on('click', function() {

    flyecnt2++;
    var icontainer = ` <div class="flyers-list-3-wrapper row" style="margin-left:3px;">

                    <div class="form-group col-md-3">

                        <label>Image</label>

                        <div class="fileinput fileinput-new" data-provides="fileinput">
                            <div class="fileinput-preview fileinput-exists thumbnail">
                             
                            </div>
                            <div>
                              <span class="btn btn-primary btn-file">
                                  <span class="fileinput-new">Select Image</span>
                                  <span class="fileinput-exists">Change</span>
                                  <input type="hidden" name="flyers_option_c[${flyecnt2}][image]" value="">
                                  <input name="flyers_option_c[${flyecnt2}][image]" type="file" class="form-control" accept="image/*"/>
                              </span>
                              <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput" style="margin-top: 15px;">Remove Row</a>
                            </div>
                        </div>

                    </div>

                    <div class="form-group col-md-2">
                        <a href="javascript:void(0);" class="remove-flyers-list-3 btn btn-danger btn-sm">Remove Row</a>
                    </div>
                </div><div class="flyers-list-3-remove-line${flyecnt2} hr-line-dashed"></div>`;

    $('.flyers-list-3-container').append(icontainer);

    $(".remove-flyers-list-3").on('click',function(){
       $(this).parent().parent().remove();
       flyecnt2--;
    });
});


$(".remove-flyers-list-3").on('click',function(){
    $(this).parent().parent().remove();
    flyecnt2--;
});


$(function () {

    // Option A
    $("#flyersdatetimepickerfrom").datepicker({
        dateFormat: "yy-mm-dd",
        minDate: 0,
        onSelect: function () {
            
            var dt1     = $('#flyersdatetimepickerto');

            var maxdate = dt1.datepicker('getDate');
            
            var minDate = $(this).datepicker('getDate');
            
            dt1.datepicker('option', 'minDate', minDate);
            
            dt1.datepicker('option', 'dateFormat', 'yy-mm-dd');

            dt1.val('');
        }
    });

    $("#flyersdatetimepickerto").datepicker({
        dateFormat: "yy-mm-dd",
        minDate: 0,
    });

    // Option B
    $("#flyerscoupondatetimepickerfrom").datepicker({
        dateFormat: "yy-mm-dd",
        minDate: 0,
        onSelect: function () {
            
            var dt1     = $('#flyerscoupondatetimepickerto');

            var maxdate = dt1.datepicker('getDate');
            
            var minDate = $(this).datepicker('getDate');
            
            dt1.datepicker('option', 'minDate', minDate);
            
            dt1.datepicker('option', 'dateFormat', 'yy-mm-dd');

            dt1.val('');
        }
    });

    $("#flyerscoupondatetimepickerto").datepicker({
        dateFormat: "yy-mm-dd",
        minDate: 0,
    });


    // Option C
    $("#flyersoptoincdatetimepickerfrom").datepicker({
        dateFormat: "yy-mm-dd",
        minDate: 0,
        onSelect: function () {
            
            var dt1     = $('#flyersoptoincdatetimepickerto');

            var maxdate = dt1.datepicker('getDate');
            
            var minDate = $(this).datepicker('getDate');
            
            dt1.datepicker('option', 'minDate', minDate);
            
            dt1.datepicker('option', 'dateFormat', 'yy-mm-dd');

            dt1.val('');
        }
    });

    $("#flyersoptoincdatetimepickerto").datepicker({
        dateFormat: "yy-mm-dd",
        minDate: 0,
    });
});
</script>
@stop