@extends('layouts.admin')

@section('styles')
<style type="text/css">
    /* The switch - the box around the slider */
    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }

    /* Hide default HTML checkbox */
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    /* The slider */
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }

    input:checked + .slider {
      background-color: #2196F3;
    }

    input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
      border-radius: 34px;
    }

    .slider.round:before {
      border-radius: 50%;
    }
</style>
@endsection
@section('content')

<form method="POST" action="{{ route("admin.promoter-task-lists.store") }}" id="promoterTaskListForm" enctype="multipart/form-data">
    @csrf
    <div class="row">
        <div class="col-12 col-md-12">
            <div class="card">
                <div class="card-header">
                    {{ trans('global.assign') }} {{ trans('cruds.promoterTaskList.title_singular') }}
                </div>

                <div class="card-body">
                    <div class="row">
                        {{-- <div class="col-12 col-md-6">
                           <div id="map" style="width: 100%; height: 500px;"></div>
                           <input type="hidden" name="lat" id="lat" value="{{ old('lat') }}" />
                           <input type="hidden" name="lng" id="lng" value="{{ old('lng') }}" />
                        </div> --}}
                        <div class="col-12 col-md-12">
                            <div class="form-group">
                                <label class="required" for="state_id">{{ trans('cruds.promoterTaskList.fields.state') }}</label>
                                <select class="form-control select2 {{ $errors->has('state_id') ? 'is-invalid' : '' }}" name="state_id" id="state_id" required>
                                    <option value=""></option>
                                    @foreach($states as $id => $entry)
                                        <option value="{{ $id }}" {{ old('state_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                                    @endforeach
                                </select>
                                @if($errors->has('state_id'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('state_id') }}
                                    </div>
                                @endif
                                <span class="help-block">{{ trans('cruds.promoterTaskList.fields.state_helper') }}</span>
                            </div>
                            <div class="form-group">
                                <label class="required" for="city_id">{{ trans('cruds.promoterTaskList.fields.city') }}</label>
                                <select class="form-control select2 {{ $errors->has('city_id') ? 'is-invalid' : '' }}" name="city_id" id="city_id">
                                    <option value=""></option>
                                    @foreach($cities as $id => $entry)
                                        <option value="{{ $id }}" {{ old('city_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                                    @endforeach
                                </select>
                                @if($errors->has('city_id'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('city_id') }}
                                    </div>
                                @endif
                                <span class="help-block">{{ trans('cruds.promoterTaskList.fields.city_helper') }}</span>
                            </div>
                            <div class="form-group">
                                <label class="required" for="available_store_id">{{ trans('cruds.promoterTaskList.fields.available_store') }}</label>
                                <select class="form-control select2 {{ $errors->has('available_store_id') ? 'is-invalid' : '' }}" name="available_store_id" id="available_store_id" required>
                                    <option value=""></option>
                                    @if(old('availableStores'))
                                        @foreach (old('availableStores') as $id => $availableStoreName)
                                            <option value="{{ $id }}">{{ $availableStoreName }}</option>
                                        @endforeach
                                    @endif
                                        {{-- @foreach($errors as $id => $entry)
                                            <option value="{{ $id }}" {{ old('city_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                                        @endforeach --}}
                                    {{-- @foreach($available_stores as $id => $entry)
                                        <option value="{{ $id }}" {{ old('available_store_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                                    @endforeach --}}
                                </select>
                                @if($errors->has('available_store_id'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('available_store_id') }}
                                    </div>
                                @endif
                                <span class="help-block">{{ trans('cruds.promoterTaskList.fields.available_store_helper') }}</span>
                            </div>
                            {{-- <div class="form-group">
                                <label class="required" for="date">{{ trans('cruds.promoterTaskList.fields.date') }}</label>
                                <input class="form-control date {{ $errors->has('date') ? 'is-invalid' : '' }}" type="text" name="date" id="date" value="{{ old('date', '') }}" required>
                                @if($errors->has('date'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('date') }}
                                    </div>
                                @endif
                                <span class="help-block">{{ trans('cruds.promoterTaskList.fields.date_helper') }}</span>
                            </div> --}}
                            <div class="form-group">
                                <label class="required" for="date_from">{{ trans('cruds.promoterTaskList.fields.date_from') }}</label>
                                <input class="form-control date {{ $errors->has('date_from') ? 'is-invalid' : '' }}" type="text" name="date_from" id="date_from" value="{{ old('date_from', '') }}" required>
                                @if($errors->has('date_from'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('date_from') }}
                                    </div>
                                @endif
                                <span class="help-block">{{ trans('cruds.promoterTaskList.fields.date_from_helper') }}</span>
                            </div>
                            <div class="form-group">
                                <label class="required" for="date_to">{{ trans('cruds.promoterTaskList.fields.date_to') }}</label>
                                <input class="form-control date {{ $errors->has('date_to') ? 'is-invalid' : '' }}" type="text" name="date_to" id="date_to" value="{{ old('date_to', '') }}" required>
                                @if($errors->has('date_to'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('date_to') }}
                                    </div>
                                @endif
                                <span class="help-block">{{ trans('cruds.promoterTaskList.fields.date_to_helper') }}</span>
                            </div>
                            <div class="form-group">
                                <label class="required" for="promoters">{{ trans('cruds.promoterTaskList.fields.promoters') }}</label>
                                <div style="padding-bottom: 4px">
                                    <span class="btn btn-info btn-xs select-all" style="border-radius: 0">{{ trans('global.select_all') }}</span>
                                    <span class="btn btn-info btn-xs deselect-all" style="border-radius: 0">{{ trans('global.deselect_all') }}</span>
                                </div>
                                <select class="form-control select2 {{ $errors->has('promoters') ? 'is-invalid' : '' }}" name="promoters[]" id="promoters" multiple required>
                                    @foreach($promoters as $id => $role)
                                    <option value="{{ $id }}" {{ in_array($id, old('promoters', [])) ? 'selected' : '' }}>{{ $role }}</option>
                                    @endforeach
                                </select>
                                @if($errors->has('promoters'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('promoters') }}
                                    </div>
                                @endif
                                <span class="help-block">{{ trans('cruds.promoterTaskList.fields.promoters_helper') }}</span>
                            </div>
                            <div class="form-group">
                                <label for="remark">{{ trans('cruds.promoterTaskList.fields.remark') }}</label>
                                <textarea class="form-control {{ $errors->has('remark') ? 'is-invalid' : '' }}" name="remark" id="remark">{{ old('remark') }}</textarea>
                                @if($errors->has('remark'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('remark') }}
                                    </div>
                                @endif
                                <span class="help-block">{{ trans('cruds.promoterTaskList.fields.remark_helper') }}</span>
                            </div>
                            <div class="form-group">
                                <label class="required">{{ trans('cruds.promoterTaskList.fields.status') }}</label>
                                <select class="form-control {{ $errors->has('status') ? 'is-invalid' : '' }}" name="status" id="status" required>
                                    <option value disabled {{ old('status', null) === null ? 'selected' : '' }}>{{ trans('global.pleaseSelect') }}</option>
                                    @foreach(App\Models\PromoterTaskList::STATUS_SELECT as $key => $label)
                                        <option value="{{ $key }}" {{ old('status', '1') === (string) $key ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                                @if($errors->has('status'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('status') }}
                                    </div>
                                @endif
                                <span class="help-block">{{ trans('cruds.promoterTaskList.fields.status_helper') }}</span>
                            </div>
                            {{-- <div class="form-group">
                                <label class="required" for="time">{{ trans('cruds.promoterTaskList.fields.time') }}</label>
                                <input class="form-control timepicker {{ $errors->has('time') ? 'is-invalid' : '' }}" type="text" name="time" id="time" value="{{ old('time', '') }}" required>
                                @if($errors->has('time'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('time') }}
                                    </div>
                                @endif
                                <span class="help-block">{{ trans('cruds.promoterTaskList.fields.time_helper') }}</span>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- <div class="col-12 col-md-6">
            <div class="card">
                <div class="card-header">
                    Store Location
                </div>
                <div class="card-body">
                    <iframe
                      width="100%"
                      height="375"
                      id="google-iframe"
                      loading="lazy"
                      frameborder="0" style="border:0"
                      src="https://maps.google.com/maps?q=Sans+Wellness+Taman+Sutera&t=&z=13&ie=UTF8&iwloc=&output=embed" allowfullscreen>
                    </iframe>
                    <input type="hidden" name="google_map_parameter" id="google_map_parameter" value="" />
                </div>
            </div>
        </div> --}}
    </div>

    <div class="card">
        <div class="card-header">
            {{ trans('cruds.promoterTaskList.title_singular') }} Record (Products)
        </div>
        <div class="card-body">
            <div class="form-group">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <th>Name</th>
                            <th>Qty</th>
                         </thead>    
                        <tbody>
                            @foreach ($products as $id => $product_name)
                                <tr>
                                    <td>{{ $product_name }}</td>
                                    <td>
                                        <input class="form-control {{ $errors->has('promoterTaskListProducts.'.$id.'.audit_qty') ? 'is-invalid' : '' }}" type="number" step="1" name="promoterTaskListProducts[{{ $id }}][audit_qty]" id="promoterTaskListProducts.{{ $id }}.audit_qty" value="{{ old('promoterTaskListProducts.' . $id . '.audit_qty', '') }}" required>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- <div class="card">
        <div class="card-header">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    {{ trans('cruds.promoterTaskList.title_singular') }} Record (Products)
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="form-group">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Quantity</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="promoter-task-list-products">
                            @if(old('promoter-task-list-products')!="")
                                <div id="countVar" data-count = "{{ count(old('promoter-task-list-products')) }}"></div>
                                @foreach(old('promoter-task-list-products') as $key => $value)
                                    <tr data-id={{ ($key == 0) ? $key + 1 : $key }}>
                                        <th scope="row">{{ ($key == 0) ? $key + 1 : $key }}</th>
                                        <td>
                                            <select class="select2 form-control @error('promoter-task-list-products.'.$key.'.product') is-invalid @enderror" name="promoter-task-list-products[{{ $key }}][product]" style="width: 100%;">
                                                @foreach ($products as $id => $product_name)
                                                    <option value="{{ $id }}">{{ $product_name }}</option>
                                                @endforeach
                                            </select>
                                            @error('promoter-task-list-products.'.$key.'.product')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </td>
                                        <td>
                                            <input type="number" step="0.01" min="0" class="form-control" name="promoter-task-list-products[{{ $key }}][audit_qty]">
                                            @error('promoter-task-list-products.'.$key.'.audit_qty')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </td>
                                        <td class="text-center">
                                            @if($key == 0)
                                                <button type="button" class="btn btn-success product-bundle-plus"> <i class="fa fa-plus"></i> </button>
                                            @else
                                                <button type="button" class="btn btn-success product-bundle-plus"> <i class="fa fa-plus"></i> </button>
                                                <button type="button" class="btn btn-danger product-bundle-minus"> <i class="fa fa-minus"></i> </button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                            <div id="countVar" data-count="0"></div>
                            <tr data-id="1">
                                <th scope="row">1</th>
                                <td>
                                    <select class="select2 form-control w-100" name="promoter-task-list-products[1][product]" style="width: 100%;">
                                        @foreach ($products as $id => $product_name)
                                            <option value="{{ $id }}">{{ $product_name }}</option>
                                        @endforeach
                                    </select>
                                    @error('promoter-task-list-products.1.product')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </td>
                                <td>
                                    <input type="number" step="0.01" min="0" value="0" class="form-control" name="promoter-task-list-products[1][audit_qty]">
                                    @error('promoter-task-list-products.1.audit_qty')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-success product-bundle-plus"> <i class="fa fa-plus"></i> </button>
                                </td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div> --}}

    <div class="card">
        <div class="card-header">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    {{ trans('cruds.promoterTaskList.title_singular') }} Record (Additional Gifts)
                </div>
                <div>
                    <label class="switch m-0">
                        <input type="checkbox" name="giftEnabled" id="giftEnabled">
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>
        </div>
        <div class="card-body" id="promoter-task-list-gifts-card" style="display: none;">
            <div class="form-group">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Quantity</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="promoter-task-list-gifts">
                            @if(old('promoter-task-list-gifts')!="")
                                <div id="countVar" data-count = "{{ count(old('promoter-task-list-gifts')) }}"></div>
                                @foreach(old('promoter-task-list-gifts') as $key => $value)
                                    <tr data-id={{ ($key == 0) ? $key + 1 : $key }}>
                                        <th scope="row">{{ ($key == 0) ? $key + 1 : $key }}</th>
                                        <td>
                                            <select class="select2 form-control @error('promoter-task-list-gifts.'.$key.'.product') is-invalid @enderror" name="promoter-task-list-gifts[{{ $key }}][product]" style="width: 100%;">
                                                @foreach ($additionalProducts as $id => $product_name)
                                                    <option value="{{ $id }}">{{ $product_name }}</option>
                                                @endforeach
                                            </select>
                                            @error('promoter-task-list-gifts.'.$key.'.product')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </td>
                                        <td>
                                            <input type="number" step="0.01" min="0" class="form-control" name="promoter-task-list-gifts[{{ $key }}][audit_qty]">
                                            @error('promoter-task-list-gifts.'.$key.'.audit_qty')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </td>
                                        <td class="text-center">
                                            @if($key == 0)
                                                <button type="button" class="btn btn-success gift-bundle-plus"> <i class="fa fa-plus"></i> </button>
                                            @else
                                                <button type="button" class="btn btn-success gift-bundle-plus"> <i class="fa fa-plus"></i> </button>
                                                <button type="button" class="btn btn-danger gift-bundle-minus"> <i class="fa fa-minus"></i> </button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                            <div id="countVar" data-count="0"></div>
                            <tr data-id="1">
                                <th scope="row">1</th>
                                <td>
                                    <select class="select2 form-control w-100" name="promoter-task-list-gifts[1][product]" style="width: 100%;">
                                        @foreach ($additionalProducts as $id => $product_name)
                                            <option value="{{ $id }}">{{ $product_name }}</option>
                                        @endforeach
                                    </select>
                                    @error('promoter-task-list-gifts.1.product')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </td>
                                <td>
                                    <input type="number" step="0.01" min="0" value="0" class="form-control" name="promoter-task-list-gifts[1][audit_qty]">
                                    @error('promoter-task-list-gifts.1.audit_qty')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-success gift-bundle-plus"> <i class="fa fa-plus"></i> </button>
                                </td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            Upload Images
        </div>
        <div class="card-body">
            <div class="form-group">
                <label for="upload_images">{{ trans('cruds.promoterTaskList.fields.upload_images') }}</label>
                <div class="needsclick dropzone {{ $errors->has('upload_images') ? 'is-invalid' : '' }}" id="upload-images-dropzone">
                </div>
                @if($errors->has('upload_images'))
                    <div class="invalid-feedback">
                        {{ $errors->first('upload_images') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.promoterTaskList.fields.upload_images_helper') }}</span>
            </div>
            <div class="form-group">
                <button class="btn btn-danger" id="submitBtn" type="submit">
                    {{ trans('global.save') }}
                </button>
            </div>
        </div>
    </div>
</form>



@endsection

@section('scripts')
<script>
var acceptedFileLength = 0;

Dropzone.options.uploadImagesDropzone = {
    url: '{{ route('admin.promoter-task-list-pictures.uploadImages') }}',
    maxFilesize: 2, // MB
    acceptedFiles: '.jpeg,.jpg,.png,.gif',
    addRemoveLinks: true,
    maxFiles: 100,
    parallelUploads: 100,
    uploadMultiple: true,
    autoProcessQueue: false,
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    init: function () {
        myDropzone = this;

        this.on("addedfiles", function (file) {
        });

        document.querySelector("button[type=submit]").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            const queueFiles = myDropzone.getQueuedFiles();
            if(Array.isArray(queueFiles) && !queueFiles.length)
            {
                $('#promoterTaskListForm').submit();
            }
            else
            {
                myDropzone.processQueue();
            }
        });

        this.on("successmultiple", function (file, response) {
            $(response).each(function(key, item){
                $('form').append('<input type="hidden" name="upload_picture[' + acceptedFileLength + ']" value="' + item.name + '">')
                acceptedFileLength++;
            })

            $('#promoterTaskListForm').submit();
        });

        this.on("removedfile", function(file){
            file.previewElement.remove();
            if (file.status !== 'error') {
            }
        });
      
        this.on("errormultiple", function(file, message){
            console.log(message);
        })
    },        
}

$(function(){
    var stateCircle, cityCircle;
    // Select Dependent Dropdowns
    // $("#state_id").change(function(){
    //     $.ajax({
    //         url: "{{ route('admin.store-audits.getStateGoogleLocation') }}?state_id=" + $(this).val(),
    //         method: 'GET',
    //         success: function(data) {
    //             $('#city_id').html(data.html);

    //             let lat = parseFloat(data.state.lat);
    //             let lng = parseFloat(data.state.long);

    //             let newPos = { lat: lat, lng: lng };

    //             map.panTo(new google.maps.LatLng(
    //                 lat,
    //                 lng
    //             ));

    //             marker.setPosition(newPos);

    //             if(stateCircle && stateCircle.setMap)
    //                 stateCircle.setMap(null);

    //             stateCircle = new google.maps.Circle({
    //               strokeColor: "#FF0000",
    //               strokeOpacity: 0.8,
    //               strokeWeight: 2,
    //               fillColor: "#FF0000",
    //               fillOpacity: 0.35,
    //               map,
    //               center: newPos,
    //               radius: Math.sqrt(data.state.population) * 100,
    //             });
    //         }
    //     });
    // });

    // $("#city_id").change(function(){
    //     $.ajax({
    //         url: "{{ route('admin.store-audits.getCityGoogleLocation') }}",
    //         data: { geo_city_id: $(this).val(), radius : stateCircle.getRadius()} ,
    //         method: 'GET',
    //         success: function(data) {
    //             let lat = parseFloat(data.city.lat);
    //             let lng = parseFloat(data.city.long);

    //             let newPos = { lat: lat, lng: lng };

    //             map.panTo(new google.maps.LatLng(
    //                 lat,
    //                 lng
    //             ));

    //             marker.setPosition(newPos);

    //             if(cityCircle && cityCircle.setMap)
    //                 cityCircle.setMap(null);

    //             $('#available_store_id').html(data.html);
    //         }
    //     });
    // });

    $("#state_id").change(function(){
        $.ajax({
            url: "{{ route('admin.promoter-task-lists.get_by_state') }}?state_id=" + $(this).val(),
            method: 'GET',
            success: function(data) {
                $('#city_id').html(data.html);
                $('#available_store_id').html(data.availableStoresHTML);
            }
        });
    });

    $("#city_id").change(function(){
        $.ajax({
            url: "{{ route('admin.promoter-task-lists.get_by_city') }}",
            data: { state_id: $('#state_id').val(), city_id : $(this).val()},
            method: 'GET',
            success: function(data) {
                $('#available_store_id').html(data.html);
            }
        });
    });

    var productOptions = {!! $products !!};
    var additionalProductOptions = {!! $additionalProducts !!};

    $('body').on('click', '.product-bundle-plus', function() { 
        // i = $('#tab_logic tr').length; 
        var i =  $('#promoter-task-list-products tr:last').data('id');
        i = i+1;
        $('#promoter-task-list-products').append('<tr data-id="'+ i +'">\
            <th scope="row">'+ i +'</th>\
            <td>\
                <select class="select2 form-control w-100" name="promoter-task-list-products['+ i +'][product]" id="promoter-task-list-products-' + i + '-product" style="width: 100%;"></select>\
            </td>\
            <td>\
                <input type="number" step="0.01" min="0" class="form-control" name="promoter-task-list-products[' + i + '][audit_qty]" value="0">\
            </td>\
            <td class="text-center">\
                <button type="button" class="btn btn-success product-bundle-plus"> <i class="fa fa-plus"></i> </button>\
                <button type="button" class="btn btn-danger product-bundle-minus"> <i class="fa fa-minus"></i> </button>\
            </td>\
        </tr>');

        $.each(productOptions , function (key, value) {
            $('#promoter-task-list-products-' + i + '-product').append($('<option>',
                {
                value: key,
                text: value
                })
            );
        });

        $('.select2').select2({
            placeholder: "Select an option",
            allowClear: true,
            theme: 'bootstrap'
        });
    });

    $('body').on('click', '.gift-bundle-plus', function() { 
        // i = $('#tab_logic tr').length; 
        var i =  $('#promoter-task-list-gifts tr:last').data('id');
        i = i+1;
        $('#promoter-task-list-gifts').append('<tr data-id="'+ i +'">\
            <th scope="row">'+ i +'</th>\
            <td>\
                <select class="select2 form-control w-100" name="promoter-task-list-gifts['+ i +'][product]" id="promoter-task-list-gifts-' + i + '-product" style="width: 100%;"></select>\
            </td>\
            <td>\
                <input type="number" step="0.01" min="0" class="form-control" name="promoter-task-list-gifts[' + i + '][audit_qty]" value="0">\
            </td>\
            <td class="text-center">\
                <button type="button" class="btn btn-success gift-bundle-plus"> <i class="fa fa-plus"></i> </button>\
                <button type="button" class="btn btn-danger gift-bundle-minus"> <i class="fa fa-minus"></i> </button>\
            </td>\
        </tr>');

        $.each(additionalProductOptions , function (key, value) {
            $('#promoter-task-list-gifts-' + i + '-product').append($('<option>',
                {
                value: key,
                text: value
                })
            );
        });

        $('.select2').select2({
            placeholder: "Select an option",
            allowClear: true,
            theme: 'bootstrap'
        });
    });

    $('body').on('click', '.product-bundle-minus', function() {
        $(this).closest('tr').remove();
    });

    $('body').on('click', '.gift-bundle-minus', function() {
        $(this).closest('tr').remove();
    });

    $('body').on('change', '#giftEnabled', function() {
        if(this.checked) {
            $("#promoter-task-list-gifts-card").show();
        }
        else
        {
            $("#promoter-task-list-gifts-card").hide();
        }
    });
});
</script>


@endsection