@extends('front.practitioner.import.template.import')
@section('content')
<link href="{{ asset('assets/css/colorPick.css') }}" rel='stylesheet' />
<link href="{{ asset('assets/css/colorPick.dark.theme.css') }}" rel='stylesheet' />
<link href="{{ asset('assets/css/croppie.min.css') }}" rel='stylesheet' />
<link src='{{ asset("assets/css/datepicker.css")}}' rel="stylesheet" />

<style>
   .timezoneDiv .select2-selection__arrow
   {
      display: none;
   }
   .newBusinessDetailsPage .top-pading{ 
      margin-top: 0.25rem !important; 
   }
   .sidebar-menu {
    display: none;
   }
   body.grey-bg {
    background: #f7f7f7;
   }
   .autosizetextaria {
        overflow-y: hidden; 
        resize: none; 
    }
    .error-message{
      font-size: 80%;
    }
    .notes-menu {
        background: #f7f7f7 !important;
    }
    .timePickerNew .form-select {
		border: 1px solid #ccc;
		box-shadow: none; /* Avoid box shadows on dropdown */
		background-color: #fff;
		color: #24303f;
	}

    #coupon_type {
        padding: 6px !important;
    }

    .coupon-main .select2-container--default .select2-selection--single .select2-selection__rendered {
        text-align: left;
    }
    .select2-search__field
    {
        width: 100% !important;
    }
</style>

    <div class="voucher-setting-main coupon-main">
        <div class="container-fluid">
            <div class="row">
                <nav class="navbar navbar-light bg-light invoice-page-menu notes-menu w-100">
                    <a class=" p-0" href="{{ route('practitioner.settings.get.coupon') }}"><img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude" style="min-width: 40px"></a>
                    <a class="navbar-brand p-0 " href="{{ URL::previous() }}"><img src="{{asset('assets/images/MA Icon Colour.svg')}}" alt="" class="img-flude" style="min-width: 43px"></a>
                    
                    <h1 class="page-title eagle-font font-400 "><span class="">Coupons</span></h1>

                </nav>

                <div class="brdr-bttm w-100"></div>
            </div>
        </div>

        <div class="voucher-setting-box">
            <div id="accordion">
                <div class="card">
                    <div class="card-header" id="headingOne">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Customise settings
                        </button>
                    </div>
    
					<form id="addcouponsdata" name="addcouponsdata" method="POST" autocomplete="off">
						@csrf
                        <input type="hidden" id="id" name="id" value="{{isset($couponsData->id)? $couponsData->id : '' }}">
                        <div class="card-body">
                            <div class="seting-card-body">
                                <div class="form-group ">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label for="">Coupon type</label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <div class="form-group select2-multiple-autoselect m-0">
                                                <select aria-placeholder="Select" class="form-control text-capitalize js-example-basic-single" id="coupon_type" name="coupon_type"> 
                                                    <option value="" selected disabled>Select</option>
                                                    <option value="services" @if(isset($couponsData->coupon_type) && $couponsData->coupon_type == 'services') selected @endif>Services</option>
                                                    <option value="packages" @if(isset($couponsData->coupon_type) && $couponsData->coupon_type == 'packages') selected @endif>Packages</option>
                                                    <option value="courses" @if(isset($couponsData->coupon_type) && $couponsData->coupon_type == 'courses') selected @endif>Courses</option>
                                                </select>
                                                <span class="invalid-feedback d-block"></span>
                                            </div>
                                        </div>                                         
                                    </div>
                                </div>
                                <div class="form-group ">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label for="">Coupon name</label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <input type="text" name="coupon_name" class="form-control" placeholder="E.g. Black Friday promo" value="{{ $couponsData->coupon_name ?? ""  }}">
                                            <span class="invalid-feedback d-block"></span>
                                        </div>                                        
                                    </div>
                                </div>

                                <div class="form-group ">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label for="">Coupon code</label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <input type="text" name="coupon_code" class="form-control" placeholder="Enter coupon code" @if(isset($couponsData) && $couponsData->total_redeem_coupon !=0) readonly @endif value="{{ $couponsData->coupon_code ?? ""  }}">
                                            <span class="invalid-feedback d-block"></span>
                                        </div>                                        
                                    </div>
                                </div>

                                <div class="form-group ">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label for="">Coupon discount</label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <div class="row align-items-start">
                                                <div class="col-sm-12 col-md-6">
                                                    
                                                    <input type="text" name="coupon_discount" value="{{ $couponsData->coupon_discount ?? ""  }}" class="form-control coupon-discount" placeholder="E.g. 10">
                                                    <span class="invalid-feedback d-block"></span>
                                                </div>
                                                <div class="col-sm-12 col-md-6">
                                                    <div class="form-group m-0 brdrfull marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child select-arrow-none">
                                                        <select class="form-control  js-example-basic-single font-13 text-center" style="width:100%"  name="discount_amount_type" id="discount_amount_type">
                                                            <option  @if(isset($couponsData->discount_amount_type) && $couponsData->discount_amount_type=="%") {{ "selected"  }}  @endif   value="%">%</option>
                                                            <option  @if(isset($couponsData->discount_amount_type) && $couponsData->discount_amount_type=="$") {{ "selected"  }}  @endif   value="$">$</option>
                                                            
                                                        </select>
                                                    </div>
                                                    <span class="invalid-feedback d-block"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label class="tooltip-new">Limit to 1 per client
                                            </label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-6">
                                                    <div class="age-title">
                                                        <input type="radio" id="is_limit_one_yes" name="is_limit_one" value="1" @if(isset($couponsData->is_limit_one) && $couponsData->is_limit_one == '1') checked @endif>
                                                        <label for="is_limit_one_yes" class="w-100 text-center ">Yes</label>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-6">
                                                    <div class="age-title">
                                                        <input   type="radio" id="is_limit_one_no" name="is_limit_one" value="0" @if(isset($couponsData->is_limit_one) && $couponsData->is_limit_one == '0') checked @endif>
                                                        <label for="is_limit_one_no" class="w-100 text-center ">No</label>
                                                    </div>
                                                </div>   
                                            </div>
                                            <span class="invalid-feedback d-block" id="is_limit_one_error"></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label class="tooltip-new">Limit coupon redemptions
                                            </label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-6">
                                                    <div class="age-title">
                                                        <input type="radio" id="is_limit_coupon_redemption_yes" name="is_limit_coupon_redemption" value="1" @if(isset($couponsData->is_limit_coupon_redemption) && $couponsData->is_limit_coupon_redemption == '1') checked @endif>
                                                        <label for="is_limit_coupon_redemption_yes" class="w-100 text-center ">Yes</label>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-6">
                                                    <div class="age-title">
                                                        <input   type="radio" id="is_limit_coupon_redemption_no" name="is_limit_coupon_redemption" value="0" @if(isset($couponsData->is_limit_coupon_redemption) && $couponsData->is_limit_coupon_redemption == '0') checked @endif>
                                                        <label for="is_limit_coupon_redemption_no" class="w-100 text-center ">No</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <span class="invalid-feedback d-block" id="is_limit_coupon_redemption_error"></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group d-none" id="total_coupon_div">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label for="">Total coupons redeemable</label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <div class="row align-items-start">
                                                <div class="col-sm-12 col-md-6">
                                                    <input type="text" name="total_coupon" value="{{ $couponsData->total_coupon ?? ""  }}" class="form-control coupon-discount" placeholder="E.g. 10">
                                                    <span class="invalid-feedback d-block"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group small-padding-group @if(isset($couponsData->coupon_type) && $couponsData->coupon_type == 'packages') @else d-none @endif package_div">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label class="tooltip-new">Applicable packages </label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <div class="form-group select2-multiple-autoselect m-0">
                                                <select aria-placeholder="Select package"  class="form-control text-capitalize select2-form-control applicable_packages" id="applicable_packages" name="packages[]" multiple="multiple">                                                  
                                                    <option value="All" {{ isset($couponsData->packages) && $couponsData->packages === 'all' ? 'selected' : '' }}>All</option>
                                                    @foreach ($packages as $package)
                                                        <option  class="text-capitalize" value="{{ $package->id }}" 
                                                            {{ isset($couponsData->packages) && in_array($package->id, explode(',', $couponsData->packages)) ? 'selected' : '' }}>
                                                            {{ $package->package_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                <span class="invalid-feedback d-block" id="packages_error"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group small-padding-group  @if(isset($couponsData->coupon_type) && $couponsData->coupon_type == 'courses') @else d-none @endif course_div">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label class="tooltip-new">Applicable courses </label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <select aria-placeholder="Select courses"  class="form-control text-capitalize select2-form-control applicable_courses" id="applicable_courses" name="courses[]" multiple="multiple">                                                  
                                                <option value="All" {{ isset($couponsData->courses) && $couponsData->courses === 'all' ? 'selected' : '' }}>All</option>
                                                @foreach ($courses as $course)
                                                    <option  class="text-capitalize" value="{{ $course->id }}" 
                                                        {{ isset($couponsData->courses) && in_array($course->id, explode(',', $couponsData->courses)) ? 'selected' : '' }}>
                                                        {{ $course->course_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <span class="invalid-feedback d-block" id="packages_error"></span>
                                        </div>
                                    </div>
                                </div>


                                <div class="@if(isset($couponsData->coupon_type) && $couponsData->coupon_type == 'services') @else d-none @endif service_div">
                                    <div class="form-group small-padding-group ">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-5">
                                                <label class="tooltip-new">Applicable services </label>
                                            </div>
                                            <div class="col-sm-12 col-md-7">
                                                <div class="form-group select2-multiple-autoselect m-0">
                                                    <select aria-placeholder="Select service"  class="form-control text-capitalize select2-form-control applicable_services" id="services" name="services[]" multiple="multiple">                                                  

                                                        <option value="All" {{ isset($couponsData->services) && $couponsData->services === 'all' ? 'selected' : '' }}>All</option>
                                                        @foreach ($practitonerAppointmentTypes as $appointmentType)
                                                            <option  class="text-capitalize" value="{{ $appointmentType->id }}" 
                                                                {{ isset($couponsData->services) && in_array($appointmentType->id, explode(',', $couponsData->services)) ? 'selected' : '' }}>
                                                                {{ $appointmentType->appointment_type }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <span class="invalid-feedback d-block" id="services_error"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group small-padding-group">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-5">
                                                <label class="tooltip-new">Applicable service providers </label>
                                            </div>
                                            <div class="col-sm-12 col-md-7">
                                                <div class="form-group select2-multiple-autoselect m-0">

                                                    <select aria-placeholder="Select service providers"  class="form-control text-capitalize service_providers select2-form-control" id="service_providers" name="service_providers[]" multiple="multiple">   

                                                        <option value="All" {{ isset($couponsData->service_providers) && $couponsData->service_providers === 'all' ? 'selected' : '' }}>All</option>
                                                        <option class="form-control navy-text" value="{{ $practitioner->id }}" 
                                                            {{ isset($couponsData->service_providers) && in_array($practitioner->id, explode(',', $couponsData->service_providers)) ? 'selected' : '' }}>
                                                            {{ $practitioner->first_name . ' ' . $practitioner->last_name }}
                                                        </option>
                                                        @foreach($serviceProviders as $key => $value)
                                                            @if($value->role == "service_provider")
                                                                <option class="form-control navy-text" value="{{ $value->id }}" 
                                                                    {{ isset($couponsData->service_providers) && in_array($value->id, explode(',', $couponsData->service_providers)) ? 'selected' : '' }}>
                                                                    {{ $value->first_name.' ' .$value->last_name }}
                                                                </option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                    <span class="invalid-feedback d-block" id="service_providers_error"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group small-padding-group">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-5">
                                                <label class="tooltip-new">Applicable locations </label>
                                            </div>
                                            <div class="col-sm-12 col-md-7">
                                                <div class="form-group select2-multiple-autoselect m-0">
                                                    <select aria-placeholder="Select locations"  class="form-control text-capitalize locations select2-form-control" id="locations" name="locations[]" multiple="multiple">
                                                                    
                                                        <option value="All" {{ isset($couponsData->locations) && $couponsData->locations === 'all' ? 'selected' : '' }}>All</option>
                                                        @foreach($locations as $key => $value)
                                                            <option value="{{ $value->id }}" 
                                                                {{ isset($couponsData->locations) && in_array($value->id, explode(',', $couponsData->locations)) ? 'selected' : '' }}>
                                                                {{ getLocationAddress($value->address) }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <span class="invalid-feedback d-block" id="locations_error"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group ">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label for="">Start date and time</label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <div class="row align-items-start">
                                                <div class="col-sm-12 col-md-6">
                                                    <div id="app-date-box">
                                                        <input type="text" class="form-control start_date" id="start_date" placeholder="dd/mm/yyyy" name="start_date"
                                                        autocomplete="off" value="{{isset($couponsData->convertedStartDate)? $couponsData->convertedStartDate: '' }}">
                                                        <span class="invalid-feedback d-block"></span>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-6 pl-0">
                                                    <div class="timePickerNew" name ="coupon_start_time" id="coupon_start_time" style="width: 20rem;"></div>
                                                    <span class="invalid-feedback d-block" id="start_time_error"></span>
                                                   
                                                    <input type="hidden" name="start_time" id="start_time" autocomplete="off" readonly value="{{isset($couponsData->convertedStarttime) ? $couponsData->convertedStarttime: '' }}">
                                                   
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group ">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label for="">End date and time</label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <div class="row align-items-start">
                                                <div class="col-sm-12 col-md-6">
                                                    <div id="app-date-box">
                                                        <input type="text" class="form-control end_date" id="end_date" placeholder="dd/mm/yyyy" name="end_date"
                                                        autocomplete="off" value="{{isset($couponsData->convertedEndDate)? $couponsData->convertedEndDate: '' }}">
                                                        <span class="invalid-feedback d-block"></span>
                                                        
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-6 pl-0">
                                                    <div class="timePickerNew" name ="coupon_end_time" id="coupon_end_time" style="width: 20rem;"></div>
                                                    <span class="invalid-feedback d-block" id="end_time_error"></span>
                                                    <input type="hidden" name="end_time" id="end_time" autocomplete="off" readonly value="{{isset($couponsData->convertedEndtime) ? $couponsData->convertedEndtime: '' }}">
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="voucher-footer">
                            <button type="submit" class="cursor-pointer btn-fill">Update and save</button>
                        </div>
					</form>
                </div>
            </div>
        </div>
    </div>

@endsection


@section('import-scripts')
<script src='{{ asset("assets/js/colorPick.js")}}'></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="{{asset('assets/js/bootstrap-datepicker.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/js/practitioner/my-settings.js')}}" type="text/javascript"></script>
<script src='{{ asset("assets/js/jquery-time-picker-new.js")}}'></script>

<script type="text/javascript">

    $(document).ready(function() {

        Totalcouponfields();

        $(".js-example-basic-single").select2({minimumResultsForSearch: -1});

        $('.applicable_services').select2({
            placeholder: "Select service",
            tokenSeparators: [",", " "],
        });

        $('.service_providers').select2({
            placeholder: "Select service providers",
            tokenSeparators: [",", " "],
        });
        $('.applicable_packages').select2({
            placeholder: "Select packages",
            tokenSeparators: [",", " "],
        });

        $('.applicable_courses').select2({
            placeholder: "Select courses",
            tokenSeparators: [",", " "],
        });
        // $('#coupon_type').select2({
        //     placeholder: "Select coupon type",
        // });

        // $("#coupon_type").select2({
        //     placeholder: "Select coupon type",
        //     closeOnSelect: true,
        //     dropdownPosition: 'below',
        // });

        

        $('.locations').select2({
            placeholder: "Select location",
            tokenSeparators: [",", " "],
        });

        $('.start_date').datepicker({
            format: "dd/mm/yyyy",
            weekStart: 1,
            todayHighlight: true,
            autoclose: true,
            clearBtn: false,
        });

        $('.end_date').datepicker({
            format: "dd/mm/yyyy",
            weekStart: 1,
            todayHighlight: true,
            autoclose: true,
            clearBtn: false,
        });

        $(function() {
            const existingValue = $("#start_time").val();
        
            $("#coupon_start_time").timepicker({
                value: existingValue,
                onChange: function (value) {
                    $("#start_time").val(value); 
                }
            });

            if (existingValue) {
                $("#coupon_start_time").setValue(existingValue);
            }
   	    });

        $(function() {
            const existingValue = $("#end_time").val();
        
            $("#coupon_end_time").timepicker({
                value: existingValue,
                onChange: function (value) {
                    $("#end_time").val(value); 
                }
            });

            if (existingValue) {
                $("#coupon_end_time").setValue(existingValue);
            }
   	    });
       
    });

    $("input[name='is_limit_coupon_redemption']").on('change', function() { 
        Totalcouponfields();
    });

    function Totalcouponfields() {
        var totalcouponfields = $("input[name='is_limit_coupon_redemption']:checked").val();
        if(totalcouponfields == '1'){
            $('#total_coupon_div').removeClass('d-none');
        }else{
            $('#total_coupon_div').addClass('d-none');
        }
    }


	$(document).on( 'submit', '#addcouponsdata', function(e) {
        e.preventDefault();

        var isValid = true; 
        $('.invalid-feedback').text(''); 
    
        if (!isValid) {
            return;
        }

        var formData = new FormData(this);
    
        $.ajax({
          type: "post",
          url: "{{ route('practitioner.settings.store.coupon') }}",
          data: new FormData(this),
          dataType: "JSON",
          cache: false,
          processData: false,
          contentType: false,
          beforeSend: function(msg) {
            $(".loading").addClass("d-block");
          }
        }).done( function(response) {
          $(".loading").removeClass("d-block");
          if( response.status == 'success' ) {
            Swal.fire({
            icon: response.status,
            title: response.msg,
            showClass: {
              popup: 'animate__animated animate__fadeInDown'
              },
              hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
              }
            })
            setTimeout(function() {
				var baseUrl = "{{route('practitioner.settings.get.coupon')}}";      
                window.location.href = baseUrl;
                //window.location.reload();
			}, 500);
            
          }else{

            $('.invalid-feedback').text('');
            
            $.each(response.errors, function(key, value) {
                console.log(key);
                   
                let input = $('input[name=' + key + ']');

                if (key === 'locations' || key === 'service_providers' || key === 'services' || key==='start_time' || key==='end_time' || key==='packages') {
                    let errorContainer = $('#' + key + '_error');
                    errorContainer.text(value[0]);
                    $('#' + key).addClass('is-invalid');
                }
                
                if (input.attr('type') === 'radio') {
                    let errorContainer = $('#' + key + '_error');
                    errorContainer.text(value[0]);
                    input.closest('.form-group').addClass('is-invalid');
                } else {
                    input.addClass('is-invalid');
                    input.next('.invalid-feedback').text(value[0]);
                }

            });

        }
        }).fail(function (error) {
          $(".loading").removeClass("d-block");
        });
    });

    $(document).on('change', '#coupon_type', function() {
        var type = this.value;
        if(type == 'services'){
            $('.service_div').removeClass('d-none');
            $('.package_div').addClass('d-none');
            $('.course_div').addClass('d-none');
        }else if(type == 'packages'){
            $('.service_div').addClass('d-none');
            $('.package_div').removeClass('d-none');
            $('.course_div').addClass('d-none');
        }else if(type == 'courses'){
            $('.service_div').addClass('d-none');
            $('.course_div').removeClass('d-none');
            $('.package_div').addClass('d-none');

        }
    });
         
</script>
@endsection