@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' />

<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;
    }
</style>

    <div class="voucher-setting-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.my.gift.vouchers') }}"><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="arca-font">My </span>Gift Voucher Settings</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 your gift vouchers
                        </button>
                    </div>
    
                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
						<form id="addgiftvouchersdata" name="addgiftvouchersdata" method="POST" autocomplete="off">
						@csrf
                        <input type="hidden" name="tab_number" id="tab_number" value="1">
                        <div class="card-body">
                            <div class="seting-card-body">
                                <div class="form-group d-none">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label for="">Gift voucher description</label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <input type="text" name="description" class="form-control" placeholder="This will appear on the voucher" value="{{ $giftVouchersData->description ?? ""  }}">
                                            <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="">Gift voucher expiry</label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <div class="row">
                                                <div class="col-sm-12 col-md-6">
                                                    <input type="text" name="voucher_expiry" class="form-control" placeholder="e.g. 3" value="{{ $giftVouchersData->voucher_expiry ?? ""  }}">
                                                    <span class="invalid-feedback d-block"></span>
                                                </div>
                                                <div class="col-sm-12 col-md-6 voucher-expiry">
                                                    {{-- <input type="text" class="form-control" placeholder="Weeks"> --}}
													<select name="voucher_expiry_type" id="voucher_expiry_type" class="single-select2" id="voucher_expiry_type" data-minimum-results-for-search="Infinity">
														<option @if(isset($giftVouchersData->voucher_expiry_type) && $giftVouchersData->voucher_expiry_type=="days") {{ "selected"  }} @endif value="days">Days</option>
                                                        <option @if(isset($giftVouchersData->voucher_expiry_type) && $giftVouchersData->voucher_expiry_type=="weeks") {{ "selected"  }} @endif value="weeks">Weeks</option>
														<option @if(isset($giftVouchersData->voucher_expiry_type) && $giftVouchersData->voucher_expiry_type=="months") {{ "selected"  }} @endif value="months">Months</option>
                                                        <option @if((isset($giftVouchersData->voucher_expiry_type) && $giftVouchersData->voucher_expiry_type == "years") || !isset($giftVouchersData->voucher_expiry_type)) {{ "selected"  }} @endif value="years">Years</option>
						
													</select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group small-padding-group">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label for="">Pricing</label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <div class="row" id="pricing_error">
                                                <div class="col-sm-12 col-md-4">
                                                    {{-- <input type="text" class="form-control" placeholder="Fixed Price"> --}}
                                                    <div class="age-title">
                                                        <input type="radio" id="fixed_price" name="pricing_type"  value="fixed" @if(isset($giftVouchersData->pricing_type) && $giftVouchersData->pricing_type == 'fixed') checked @endif autocomplete="off">
                                                        <label for="fixed_price" class="w-100 text-center ">Fixed price</label>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-5">
                                                    {{-- <input type="text" class="form-control" placeholder="Customer choice"> --}}
                                                    <div class="age-title">
                                                        <input type="radio" id="customer_choice" name="pricing_type"  value="customer" @if(isset($giftVouchersData->pricing_type) && $giftVouchersData->pricing_type == 'customer') checked @endif autocomplete="off">
                                                        <label for="customer_choice" class="w-100 text-center ">Customer choice</label>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-3">
                                                    <div class="age-title">
                                                        <input type="radio" id="price_both" name="pricing_type"  value="both" @if(isset($giftVouchersData->pricing_type) && $giftVouchersData->pricing_type == 'both') checked @endif  autocomplete="off">
                                                        <label for="price_both" class="w-100 text-center ">Both</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group small-padding-group d-none" id="fixed_price_amount">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12">
                                            <label class="tooltip-new">Fixed price amount
                                                <span class="tooltip-info-icon">
                                                    <img src='{{asset("assets/images/information-icon-new.svg")}}' alt="" class="img-fluid info-icon">
                                                </span>
                                                <div class="tooltiptext">
                                                    <div class="media">
                                                        <div class="media-body">Customers can purchase a fixed-price voucher e.g. $100, $200, $50.</div>
                                                    </div>
                                                </div>
                                            </label>
                                        </div>                                        
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12">
                                            <div id="fixed-price-container">
                                            </div>                                           
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group small-padding-group d-none" id="customer_price_amount">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label class="tooltip-new">Customer choice
                                                <span class="tooltip-info-icon">
                                                    <img src='{{asset("assets/images/information-icon-new.svg")}}' alt="" class="img-fluid info-icon">
                                                </span>
                                                <div class="tooltiptext">
                                                    <div class="media">
                                                        <div class="media-body">Customer can select the amount they would like to pay.</div>
                                                    </div>
                                                </div>
                                            </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 class="icon-input">
                                                        <div class="icon">
                                                            <img src='{{asset("assets/images/Voucher/dolar.svg")}}' alt="" class="img-fluid">
                                                        </div>
                                                        <input type="text" name="customer_minimum_amount" value="{{ $giftVouchersData->customer_minimum_amount ?? ""  }}" class="form-control" placeholder="Minimum amount">
                                                        <span class="invalid-feedback d-block"></span>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12 col-md-6">
                                                    <div class="icon-input">
                                                        <div class="icon">
                                                            <img src='{{asset("assets/images/Voucher/dolar.svg")}}' alt="" class="img-fluid">
                                                        </div>
                                                        <input type="text" name="customer_maximum_amount" value="{{ $giftVouchersData->customer_maximum_amount ?? ""  }}" class="form-control" placeholder="Maximum amount">
                                                        <span class="invalid-feedback d-block"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12">
                                            <input type="text" name="custom_price_description" value="{{ $giftVouchersData->custom_price_description ?? "" }}" class="form-control" placeholder="Add a description E.g. Valid for all services">
                                            <span class="invalid-feedback d-block"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group d-none" id="add_gst" >
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">
                                            <label class="tooltip-new">GST Inc
                                            </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="addgst-yes" name="is_gst" value="on" @if(isset($giftVouchersData->is_gst) && $giftVouchersData->is_gst == 'on') checked @endif>
                                                        <label for="addgst-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="addgst-no" name="is_gst" value="off" @if(isset($giftVouchersData->is_gst) && $giftVouchersData->is_gst == 'off') checked @endif>
                                                        <label for="addgst-no" class="w-100 text-center ">No</label>
                                                    </div>
                                                </div>
                                            </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 services
                                                <span class="tooltip-info-icon">
                                                    <img src='{{asset("assets/images/information-icon-new.svg")}}' alt="" class="img-fluid info-icon">
                                                </span>
                                                <div class="tooltiptext">
                                                    <div class="media">
                                                        <div class="media-body">Services available for gift voucher use Fixed price amount and custom price min and mix only shows if the user selects this option.</div>
                                                    </div>
                                                </div>
                                            </label>
                                        </div>
                                        <div class="col-sm-12 col-md-7">
                                            <div class="form-group select2-multiple-autoselect">
                                                <select aria-placeholder="Select service"  class="form-control text-capitalize select2-form-control" id="Service-providers-available-for-online-consults" name="services" multiple="multiple">                                                    
                                                   
                                                    <option 
                                                    @if(isset($practitionerOnlineBookings->deposit_consider) && $practitionerOnlineBookings->deposit_consider == "All") selected
                                                    @endif
                                                    class="text-capitalize" 
                                                    value="All">All</option>

                                                    <option 
                                                    @if(isset($practitionerOnlineBookings->deposit_consider) && $practitionerOnlineBookings->deposit_consider == "None") selected
                                                    @endif
                                                    class="text-capitalize" 
                                                    value="None"
                                                    >None</option>
                                                    @foreach ($practitonerAppointmentTypes as $appointmentType)
                                                    <option class="text-capitalize" value="{{$appointmentType->id}}">{{$appointmentType->appointment_type}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div> --}}
                                
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-5">  
                                            <label class="tooltip-new">Allow online purchases
                                            </label>
                                            {{-- <label class="tooltip-new">Can this voucher be purchased
                                            via your booking link?
                                            </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_online_purchase_yes" name="is_allow_online_purchase" value="1" @if(isset($giftVouchersData->is_allow_online_purchase) && $giftVouchersData->is_allow_online_purchase == '1') checked @endif  autocomplete="off">
                                                        <label for="is_online_purchase_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_online_purchase_no" name="is_allow_online_purchase" value="0" @if(isset($giftVouchersData->is_allow_online_purchase) && $giftVouchersData->is_allow_online_purchase == '0') checked @endif autocomplete="off">
                                                        <label for="is_online_purchase_no" class="w-100 text-center">No</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group small-padding-group d-none" id="purchase_link_div">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12">
                                            <label class="tooltip-new">Voucher purchase link
                                                <span class="tooltip-info-icon">
                                                    <img src='{{asset("assets/images/information-icon-new.svg")}}' alt="" class="img-fluid info-icon">
                                                </span>
                                                <div class="tooltiptext">
                                                    <div class="media">
                                                        <div class="media-body">Online voucher purchase will automatically be added on your existing booking link. You can also share the voucher link or add it to your website for direct purchases.</div>
                                                    </div>
                                                </div>
                                            </label>
                                        </div>
                                        <div class="col-sm-12 col-md-12">
                                            <div class="copy-link-input">
                                                <textarea 
                                                    name="purchase_link" id="purchase_code_link" class="form-control" placeholder="https://staging.myappointments.app/portal/public/get-embeded-code?business_id=Njk5">{{ $giftVouchersData->purchase_link ?? "" }}</textarea>
                                                    <a href="javascript:void(0)" onclick="myFunction('purchase_code_link')" class="copy-link">Copy</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group small-padding-group">
                                    <div class="row">
                                        <div class="col-sm-12 col-md-12">
                                            <label class="tooltip-new">Enter your terms and conditions (either as a URL or text)</label>
                                        </div>
                                        <div class="col-sm-12 col-md-12">
                                            <div class="copy-link-input">
                                                <textarea 
                                                    name="terms_and_condition_link" id="terms_and_condition_link" class="form-control" placeholder="Enter URL or text here">{{ $giftVouchersData->terms_and_condition_link ?? "" }}</textarea>
                                            </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 class="card">
                    <div class="card-header" id="headingTwo">
                        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            Communication
                        </button>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                        <form id="addgiftvouchersdata" name="addgiftvouchersdata" method="POST" autocomplete="off">
                        @csrf
                        <input type="hidden" name="tab_number" id="tab_number" value="2">
                        <div class="card-body">
                            <div class="seting-card-body reminder-div">
                                <div class="setting-text">
                                    <p>When vouchers are purchased, we’ll send the following email to the purchaser and/or recipients.
                                        We have provided you with suggested wording which can be edited. The personalisation drop down
                                        will automatically insert the relevant fields in your email.</p>
                                </div>

                                    <div class="sub-title">
                                        <h2 class="page-title font-15">Purchaser</h2>
                                    </div>
                                    

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-4">
                                                <label for="">Email subject line</label>
                                            </div>
                                            <div class="col-sm-12 col-md-8">
                                                <div class="">
                                                    <div class="label-input send_first_email_reminder_text main-div">
                                                        <div class="form-group brdrfull marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                                                            <select class="form-control selprepo js-example-basic-single" style="width:100%"  name="pre2" id="pre2">
                                                                <option selected disabled value="">Insert Personalisation</option>
                                                                <option value="<Purchaser full name>">Purchaser full name</option>
                                                                <option value="<Serial number>">Serial number</option>
                                                                <option value="<Voucher amount>">Voucher amount</option>
                                                                <option value="<Voucher expiry date>">Voucher expiry date</option>
                                                                <option value="<Recipient first name>">Recipient first name</option>
                                                                <option value="<Voucher download button>">Voucher download button</option>
                                                                <option value="<Business name>">Business name</option>
                                                            </select>
                                            
                                                            {{-- <textarea name="purchaser_email_subject_message" id="purchaser_email_subject_message" type="text" class="text-left append-text autosizetextaria w-100" placeholder="">
                                                            {{ $purchaser_email_subject_message }}</textarea> --}}
                                                            <textarea name="purchaser_email_subject_message" id="purchaser_email_subject_message" type="text" class=" text-left append-text autosizetextaria w-100" style="height: 0px;">{{ isset($giftVouchersData->purchaser_email_subject_message) ? $giftVouchersData->purchaser_email_subject_message : $purchaser_email_subject_message }}</textarea>
                                                        </div>
                                                        <span class="invalid-feedback d-block float-center"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-4">
                                                <label for="">Email subject text</label>
                                            </div>
                                            <div class="col-sm-12 col-md-8">
                                                <div class="">
                                                    <div class="label-input send_first_email_reminder_text main-div">
                                                        <div class="form-group brdrfull marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                                                            <select class="form-control selprepo js-example-basic-single" style="width:100%"  name="pre6"  id="pre6">
                                                                <option selected disabled value="">Insert Personalisation</option>
                                                                <option value="<Purchaser full name>">Purchaser full name</option>
                                                                <option value="<Serial number>">Serial number</option>
                                                                <option value="<Voucher amount>">Voucher amount</option>
                                                                <option value="<Voucher expiry date>">Voucher expiry date</option>
                                                                <option value="<Recipient first name>">Recipient first name</option>
                                                                <option value="<Voucher download button>">Voucher download button</option>
                                                                <option value="<Business name>">Business name</option>
                                                            </select>
                                                            
                                                            {{-- <textarea name="purchaser_email_body_message"  type="text" id="purchaser_email_body_message" class="text-left append-text autosizetextaria w-100 sms-box">
                                                            {{$purchaser_email_body_message}}</textarea> --}}
                                                            <textarea name="purchaser_email_body_message" id="purchaser_email_body_message" type="text" class=" text-left append-text autosizetextaria w-100" style="height: 0px;" placeholder="">{{ isset($giftVouchersData->purchaser_email_body_message) ? $giftVouchersData->purchaser_email_body_message : $purchaser_email_body_message }}</textarea>
                                                        </div>
                                                        <span class="invalid-feedback d-block float-center"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="sub-title">
                                        <h2 class="page-title font-15">Recipient</h2>
                                    </div>

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-4">
                                                <label for="">Email subject line</label>
                                            </div>
                                            <div class="col-sm-12 col-md-8">
                                                <div class="">
                                                    <div class="label-input send_first_email_reminder_text main-div">
                                                        <div class="form-group brdrfull marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                                                            <select class="form-control selprepo js-example-basic-single" style="width:100%"  name="pre3" id="pre3">
                                                                <option selected disabled value="">Insert Personalisation</option>
                                                                <option value="<Purchaser full name>">Purchaser full name</option>
                                                                <option value="<Serial number>">Serial number</option>
                                                                <option value="<Voucher amount>">Voucher amount</option>
                                                                <option value="<Voucher expiry date>">Voucher expiry date</option>
                                                                <option value="<Recipient first name>">Recipient first name</option>
                                                                <option value="<Voucher download button>">Voucher download button</option>
                                                                <option value="<Business name>">Business name</option>
                                                            </select>
                                                            
                                                            {{-- <textarea name="recipient_email_subject_message" id="recipient_email_subject_message" type="text" class="text-left append-text autosizetextaria w-100" placeholder="">
                                                            {{ $recipient_email_subject_message }}</textarea> --}}

                                                            <textarea name="recipient_email_subject_message" id="recipient_email_subject_message" type="text" class=" text-left append-text autosizetextaria w-100" style="height: 0px;" placeholder="">{{ isset($giftVouchersData->recipient_email_subject_message) ? $giftVouchersData->recipient_email_subject_message : $recipient_email_subject_message }}</textarea>
                                                        </div>
                                                        <span class="invalid-feedback d-block float-center"></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-sm-12 col-md-4">
                                                <label for="">Email subject text</label>
                                            </div>
                                            <div class="col-sm-12 col-md-8">
                                                <div class="">
                                                    <div class="label-input send_first_email_reminder_text main-div">
                                                        <div class="form-group brdrfull marg-bttm online-dropdown select-dropdown avalable-drop hide-first-child">
                                                            <select class="form-control selprepo js-example-basic-single" style="width:100%"  name="pre4"  id="pre4">
                                                                <option selected disabled value="">Insert Personalisation</option>
                                                                <option value="<Purchaser full name>">Purchaser full name</option>
                                                                <option value="<Serial number>">Serial number</option>
                                                                <option value="<Voucher amount>">Voucher amount</option>
                                                                <option value="<Voucher expiry date>">Voucher expiry date</option>
                                                                <option value="<Recipient first name>">Recipient first name</option>
                                                                <option value="<Voucher download button>">Voucher download button</option>
                                                                <option value="<Business name>">Business name</option>
                            
                                                            </select>
                                                           
                                                            {{-- <textarea name="recipient_email_body_message" id="recipient_email_body_message" class="text-left append-text autosizetextaria w-100  sms-box">
                                                            {{ $recipient_email_body_message }}</textarea> --}}
                                                            <textarea name="recipient_email_body_message" id="recipient_email_body_message" type="text" class=" text-left append-text autosizetextaria w-100" style="height: 0px;" placeholder="">{{ isset($giftVouchersData->recipient_email_body_message) ? $giftVouchersData->recipient_email_body_message : $recipient_email_body_message }}</textarea>
                                                        </div>
                                                        <span class="invalid-feedback d-block float-center"></span>
                                                    </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 class="card">
                    <div class="card-header" id="headingThree">
                        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            Design your voucher
                        </button>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                        <form id="addgiftvouchersdata" name="addgiftvouchersdata" method="POST" autocomplete="off">
                        @csrf
                        <input type="hidden" name="tab_number" id="tab_number" value="3">
                            <div class="card-body">
                                <div class="seting-card-body">
                                    
                                    <div class="sub-title">
                                        <h2 class="page-title font-15 mb-2">Hover on the image to upload your own </h2>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12 col-md-8">

                                            <div class="voucher-block-main">

                                                <div class="crop-img">
                                                    @if(isset($giftVouchersData->logo)  && $giftVouchersData->logo!='')
                                                        <img id="businessImagePreview" class="img-fluid main-img" alt="" src="{{asset('storage/voucher_images/'.$giftVouchersData->logo)}}"/>
                                                    @endif
                                                    <div class="profile-change">
                                                       <input type="file" name="logo" id="businessImage" accept="image/*">
                                                    </div>
                                                    @if(!isset($giftVouchersData->logo))
                                                        <div class="crop-bg main-img" id="default_image">
                                                            <img src="{{asset("assets/images/Voucher/voucher.png")}}"/><br/>
                                                            <div>
                                                            </div>
                                                        </div>
                                                    @endif
                                                    <div class="crop-bg crop-hover">
                                                       <div>
                                                          <img src="{{asset('assets/images/camera_icon.svg')}}" class="img-fluid" /><br/>
                                                          <p style="text-transform:none !important" class="">Upload image</p>
                                                          
                                                       </div>
                                                    </div>
                                                    {{-- <a class="remove-image-btn" href="javascript:void(0)" id="remove-my-logo">Remove</a> --}}
                                                 </div>      

                                                <!-- <div class="v-img">
                                                    <img src='{{asset("assets/images/Voucher/voucher.png")}}' alt="" class="img-fluid">
                                                </div> -->
                                                <div class="v-logo">
                                                    <img src='{{asset("assets/images/Voucher/voucher-new.png")}}' alt="" class="img-fluid" width="163px">
                                                </div>

                                                <div class="v-detail">
                                                    <span>To: [Recipient Name]</span>
                                                    {{-- <h3>Wishing you a very happy birthday</h3> --}}
                                                    <span>[Personalised message will show here]</span>
                                                    {{-- <textarea name="custom_message" class="form-control">{{ $giftVouchersData->custom_message ?? "Wishing you a very happy birthday" }}</textarea>
                                                    <span class="invalid-feedback d-block"></span> --}}
                                                    <br>
                                                    <span>From: [Purchaser Name]</span>

                                                    {{-- <span>For: Any service at Health First Clinic</span> --}}
                                                    {{-- <span>For: {{$businessProfile->name ?? ""}}</span> --}}

                                                    <span>{{"[Gift voucher description will show here]"}}</span>


                                                    <div class="valid add_bg_color"  style="background-color: {{ !empty($giftVouchersData->preferred_colour) ? $giftVouchersData->preferred_colour : (!empty($giftVouchersData->custom_color) ? $giftVouchersData->custom_color : '#DB9EA4') }};">
                                                        VALID UNTIL
                                                        {{-- VALID UNTIL {{ isset($giftVouchersData->voucher_expiry_date) ? \Carbon\Carbon::parse($giftVouchersData->voucher_expiry_date)->format('d/m/y') : "" }} --}}
                                                    </div> 

                                                    <div class="sr-main">
                                                        <div class="sr-no">
                                                            <span>Serial No.: XXXXXXXX</span>
                                                        </div>
                                                        <div class="sr-no">
                                                            <span>Value $XXXXX</span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="v-footer add_bg_color" style="background-color: {{ !empty($giftVouchersData->preferred_colour) ? $giftVouchersData->preferred_colour : (!empty($giftVouchersData->custom_color) ? $giftVouchersData->custom_color : '#DB9EA4') }};">
                                                    {{-- <div class="logo">
                                                        <img src='{{asset("assets/images/Voucher/v-logo.png")}}' alt="" class="img-fluid">
                                                    </div> --}}
                                                    <ul>
                                                        <li>
                                                            <div class="icon">
                                                                <img src='{{asset("assets/images/Voucher/map.svg")}}' alt="" class="img-fluid">
                                                            </div>
                                                            {{$businessProfile->address ?? ""}}, {{$businessProfile->suburb ?? ""}}                                                            
                                                              {{-- 579 Harris St, Sydney, 2007, Australia --}}
                                                        </li>
                                                        <li>
                                                            <div class="icon">
                                                                <img src='{{asset("assets/images/Voucher/phone.svg")}}' alt="" class="img-fluid">
                                                            </div>
                                                            {{ $businessProfile->office_phone ?? "" }}
                                                        </li>
                                                        {{-- <li>
                                                            <div class="icon">
                                                                <img src='{{asset("assets/images/Voucher/mail.svg")}}' alt="" class="img-fluid">
                                                            </div>
                                                            {{ $businessProfile->email ?? "" }}
                                                        </li> --}}
                                                        @if(!empty($businessProfile->website))
                                                        <li>
                                                            <div class="icon">
                                                                <img src='{{asset("assets/images/Voucher/world.svg")}}' alt="" class="img-fluid">
                                                            </div>
                                                            {{ $businessProfile->website ?? "" }}
                                                            {{-- www.website.com --}}
                                                        </li>
                                                        @endif
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-sm-12 col-md-4">
                                            <div class="select-color-main">
                                                <div class="color-block">
                                                    <div class="color-title">
                                                        <h4>Select your preferred colour</h4>
                                                    </div>

                                                    <div class="select-color">
                                                        <ul>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#6CC750" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#6CC750') checked @endif>
                                                                    <span class="check" style="background: #6CC750;"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#448BEE" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#448BEE') checked @endif>
                                                                    <span class="check" style="background: #448BEE;"></span>
                                                                </div>
                                                            </li>
                                                            {{-- <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour">
                                                                    <span class="check" style="background: #ffffff;border: 1px solid #CCCCCC;"></span>
                                                                </div>
                                                            </li> --}}
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#CDD5DF" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#CDD5DF') checked @endif>
                                                                    <span class="check" style="background: #CDD5DF;"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#3D3D3E" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#3D3D3E') checked @endif>
                                                                    <span class="check" style="background: #3D3D3E;"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#D64C46" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#D64C46') checked @endif>
                                                                    <span class="check" style="background: #D64C46;"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#EAB165" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#EAB165') checked @endif>
                                                                    <span class="check" style="background: #EAB165;"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#F8F097" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#F8F097') checked @endif>
                                                                    <span class="check" style="background: #F8F097;"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#ACE4B7" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#ACE4B7') checked @endif>
                                                                    <span class="check" style="background: #ACE4B7;"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#9CE5D9" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#9CE5D9') checked @endif>
                                                                    <span class="check" style="background: #9CE5D9;"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#79B2E8" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#79B2E8') checked @endif>
                                                                    <span class="check" style="background: #79B2E8;"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#767CB8" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#767CB8') checked @endif>
                                                                    <span class="check" style="background: #767CB8;"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#D1BEF6" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#D1BEF6') checked @endif>
                                                                    <span class="check" style="background: #D1BEF6;"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#F0B9CD" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#F0B9CD') checked @endif>
                                                                    <span class="check" style="background: #F0B9CD;"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour">
                                                                    <span class="check" style="background: url('{{asset('assets/images/Voucher/image1.png')}}');"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour">
                                                                    <span class="check" style="background: url('{{asset('assets/images/Voucher/image2.png')}}');"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#303030" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#303030') checked @endif>
                                                                    <span class="check" style="background: #303030;"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#EFD046" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#EFD046') checked @endif>
                                                                    <span class="check" style="background: #EFD046;"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#666666" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#666666') checked @endif>
                                                                    <span class="check" style="background: #666666;"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#323232" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#323232') checked @endif>
                                                                    <span class="check" style="background: #323232;"></span>
                                                                </div>
                                                            </li>
                                                            {{-- <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour">
                                                                    <span class="check" style="background: #F1F1F1;"></span>
                                                                </div>
                                                            </li> --}}
                                                            {{-- <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour">
                                                                    <span class="check" style="background: #F7F7F7;"></span>
                                                                </div>
                                                            </li> --}}
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#27303E" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#27303E') checked @endif>
                                                                    <span class="check" style="background: #27303E;"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#79ADB3" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#79ADB3') checked @endif>
                                                                    <span class="check" style="background: #79ADB3;"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#517379" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#517379') checked @endif>
                                                                    <span class="check" style="background: #517379;"></span>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="custom-radio-block">
                                                                    <input type="radio" class="custom-radio" name="preferred_colour" value="#E2B0AD" @if(isset($giftVouchersData->preferred_colour) && $giftVouchersData->preferred_colour == '#E2B0AD') checked @endif>
                                                                    <span class="check" style="background: #E2B0AD;"></span>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="color-block">
                                                    <div class="color-title">
                                                        <h4>Add a custom color</h4>
                                                    </div>

                                                    <div class="form-group">
                                                        <div class="color-cutom">
                                                            <input type="text" class="form-control" name="custom_color" value="{{ $giftVouchersData->custom_color ?? ""  }}" placeholder="#000000">
                                                            <a class="btn btn-fill cursor-pointer" id="applyCustomColor">apply</a>
                                                        </div>
                                                        <span class="invalid-feedback d-block"></span>
                                                    </div>

                                                </div>
                                                {{-- <div class="color-block">
                                                    <div class="color-title">
                                                        <h4>Customise Font</h4>
                                                    </div>

                                                    <div class="form-group">
                                                        <input type="text" class="form-control" name="custom_font"  value="{{ $giftVouchersData->custom_font ?? ""  }}" placeholder="Europa">
                                                    </div>

                                                </div> --}}
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="voucher-footer">
                                <button type="submit" id="custom_voucher" class="cursor-pointer btn-fill">Update and save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Upload business logo modal -->
   <div class="customscroll showpop">
    <div class="modal fade" id="UploadBusinessLogoModal" tabindex="-1" role="dialog" aria-hidden="true">
       <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 60%;">
          <div class="modal-content">
             <div class="popup-marg">
                <div class="modal-header">
                   <h5 class="modal-title text-center">CROP & UPLOAD IMAGE </h5>
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true"><img src="{{asset('assets/images/close-img.svg')}}" alt="" class="img-fluid closeimg"></span>
                   </button>
                </div>
                <div class="modal-body p-0">
                   <div class="row">
                      <div class="col-md-12 text-center mt-20">
                         <div id="profile_preview"></div>
                      </div>
                   </div>
                </div>
             </div>
             <div class="modal-footer" style="justify-content: center;">
                <button id="cropBusinesslogo" class="crop-picture yellow-btn mt-0 save-btn save-btn-bg" >Crop & Save</button>
             </div>
          </div>
       </div>
    </div>
 </div>
<!-- Upload business logo modal -->


    @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/practitioner/my-settings.js')}}" type="text/javascript"></script>
<script src='{{ asset("assets/js/croppie.js")}}'></script>
<script type="text/javascript">

    $(document).ready(function() {
        var businessId = @json($businessProfile->id);
        var baseUrl = "{{route('home')}}";
        var url = baseUrl + "/my/voucher?" + 'business_id=' + btoa(businessId);
        $("#purchase_code_link").html(url);
    });

    $(document).ready(function() {
        function autoResizeTextarea(textarea) {
            textarea.style.height = 'auto'; // Reset height to auto
            textarea.style.height = textarea.scrollHeight + 'px'; // Set height to scrollHeight
        }

        $('.autosizetextaria').each(function() {
            autoResizeTextarea(this);
        });

        $('.autosizetextaria').on('input', function() {
            autoResizeTextarea(this);
        });

        $(document).on('shown.bs.tab shown.bs.collapse', function() {
            $('.autosizetextaria').each(function() {
                autoResizeTextarea(this);
            });
        });
    });



//   $('.autosizetextaria').each(function() {
//     this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
//   }).on('input', function() {
//     this.style.height = 'auto';
//     this.style.height = (this.scrollHeight) + 'px';
//   });

  function insertAtCaret(areaId, text) {
    var txtarea = document.getElementById(areaId);
    if (!txtarea) {
      return;
    }

    var scrollPos = txtarea.scrollTop;
    var strPos = 0;
    var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
      "ff" : (document.selection ? "ie" : false));
    if (br == "ie") {
      txtarea.focus();
      var range = document.selection.createRange();
      range.moveStart('character', -txtarea.value.length);
      strPos = range.text.length;
    } else if (br == "ff") {
      strPos = txtarea.selectionStart;
    }

    var front = (txtarea.value).substring(0, strPos);
    var back = (txtarea.value).substring(strPos, txtarea.value.length);
    txtarea.value = front + text + back;
    strPos = strPos + text.length;
    if (br == "ie") {
      txtarea.focus();
      var ieRange = document.selection.createRange();
      ieRange.moveStart('character', -txtarea.value.length);
      ieRange.moveStart('character', strPos);
      ieRange.moveEnd('character', 0);
      ieRange.select();
    } else if (br == "ff") {
      txtarea.selectionStart = strPos;
      txtarea.selectionEnd = strPos;
      txtarea.focus();
    }

    txtarea.scrollTop = scrollPos;
    $('.selprepo').val('').trigger('change');
  }

  $('input[name="preferred_colour"]').on('click', function(e) {
    console.log($(this).val());
    $('.add_bg_color').css('background-color',$(this).val());
    $('input[name="custom_color"]').val('');
    // 
  });

  $('#applyCustomColor').on('click', function(e) {
    var input = $('input[name="custom_color"]');
    if(input.val() == '')
    {
        input.parent().next('.invalid-feedback').text('Please add custom colour');
        return false;
    }else{
        input.parent().next('.invalid-feedback').text('');
    }

    var colorValue = input.val();
    if (!colorValue.startsWith('#')) {
        colorValue = '#' + colorValue;
        input.val(colorValue);  // Update the input with the corrected value
    }

    $('.add_bg_color').css('background-color',colorValue);
    $('.custom-radio').attr('checked',false);
    
  });

  
  

//   $('.add_more_fixed_price').on('click', function(e) {
//         e.preventDefault(); 

//         let currentValue = $(this).closest('.fixed-price-item').find('input').val();

//         if (currentValue.trim() === '') {
//             $(this).closest('.fixed-price-item').find('.error-message').show();
//             return;
//         }else{
//             $(this).closest('.fixed-price-item').find('.error-message').hide();
//         }

//         let newInputItem = $('.fixed-price-item:first').clone();
//         newInputItem.find('input').val(currentValue); 
//         $(this).closest('.fixed-price-item').find('input').val('');
//         //newInputItem.find('input').val(''); 
        
//         $('.fixed-price-container').prepend(newInputItem);
//         $('.fixed-price-item').find('.add_more_fixed_price').hide();
//         $('.fixed-price-item:last').find('.add_more_fixed_price').show();
//     });

    $(document).ready(function () {
        // Get the comma-separated values
        let fixedPriceAmounts = "{{ $giftVouchersData->fixed_price_amount ?? '' }}".split(',');
        
        // Function to add a new input field
        function addFixedPriceInput(value = '',description='') {
            // Create HTML structure for the new input field
            let inputItem = `
                <div class="row fixed-price-item mb-2">
                    <div class="col-sm-12 col-md-3">
                        <div class="icon-input">
                            <div class="icon">
                                <img src='{{asset("assets/images/Voucher/dolar.svg")}}' alt="" class="img-fluid">
                            </div>
                            <input type="text" name="fixed_price_amount[]" value="${value}" class="form-control" placeholder="Enter amount">
                            <span class="invalid-feedback d-block"></span>
                            <span class="error-message text-danger is-invalid" style="display:none;">Amount required</span>
                        </div>
                    </div>
                     <div class="col-sm-12 col-md-8">
                        <div class="">                           
                            <input type="text" name="fixed_price_description[]" value="${description}" class="form-control" placeholder="Add a description E.g. Valid for all services">                            
                            <span class="invalid-feedback d-block"></span>
                            <span class="error-message text-danger is-invalid" style="display:none;">Description required</span>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-1">
                        <!-- Minus icon to remove the input field -->
                        <div class="d-flex action-btns">
                            <a class="remove_fixed_price" href="#" style="margin-right: 5px;">
                                <img src="{{asset('assets/images/minus-icon.png')}}" alt="Remove" class="img-fluid">
                            </a>
                            <!-- Plus icon to add a new input field -->
                            <a class="add_more_fixed_price" href="#">
                                <img src="{{asset('assets/images/Voucher/plus.svg')}}" alt="Add" class="img-fluid">
                            </a>
                        </div>
                    </div>
                </div>
            `;

            $('#fixed-price-container').append(inputItem); // Add the new input to the container
            updateButtonVisibility(); // Update button visibility
        }

        // Function to update the visibility of the "+" button
        function updateButtonVisibility() {
            // Hide all + buttons initially
            $('.add_more_fixed_price').hide();

            // Show only the + button of the last row
            $('.fixed-price-item:last .add_more_fixed_price').show();

            // Attach click event to the + button
            $('.fixed-price-item:last .add_more_fixed_price').off('click').on('click', function (e) {
                e.preventDefault();

                let currentItem = $(this).closest('.fixed-price-item');
                let currentValue = currentItem.find('input').val().trim();

                // Validation: If the current field is empty, show an error
                if (currentValue === '') {
                    currentItem.find('.error-message').show();
                } else {
                    currentItem.find('.error-message').hide();
                    addFixedPriceInput('',''); // Add a new blank input
                }
            });

            // Attach click event to the - button
            $('.remove_fixed_price').off('click').on('click', function (e) {
                e.preventDefault();

                // Remove the current row
                $(this).closest('.fixed-price-item').remove();

                // Ensure at least one input field remains
                if ($('.fixed-price-item').length === 0) {
                    addFixedPriceInput('',''); // Add one blank input if all are removed
                }

                // Update the visibility of the + button
                updateButtonVisibility();
            });
        }

        // Function to initialize input fields from the database values
        function initializeFixedPriceInputs() {
            if (fixedPriceAmounts.length === 0 || (fixedPriceAmounts.length === 1 && fixedPriceAmounts[0] === "")) {
                addFixedPriceInput('',''); // Add a single blank input if no values are present
            } else {
                let giftVouchersData = @json($giftVouchersData ?? '');
                if(giftVouchersData !='' && giftVouchersData.fixed_price_description != null)
                {
                    var fixedPriceDescription = giftVouchersData.fixed_price_description;
                    console.log('fixedPriceDescription',fixedPriceDescription);
                }
                
                fixedPriceAmounts.forEach((value, $key) => {
                    let description = ''; // Default description value
                    if (fixedPriceDescription != null && fixedPriceDescription[$key]) {
                        description = fixedPriceDescription[$key]; // Get description if it exists at the index
                    }else
                    {
                        description = giftVouchersData.description;
                    }
                    addFixedPriceInput(value.trim(), description); // Call the function with the amount and description
                });

            }
        }

        // Initialize the input fields on page load
        initializeFixedPriceInputs();
    });


    $(document).ready(function () {

        $('#fixed_price_amount, #customer_price_amount, #add_gst').addClass('d-none');

        PricingFields();
        OnlinePurchaseFields();

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

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

        $(".single-select2").select2({
        placeholder: function () {
            $(this).data('placeholder');
        },
        closeOnSelect: true,
        dropdownPosition: 'below',
        });
        //Start calendar interval
	});

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

        var isValid = true; 
        $('.invalid-feedback').text(''); 
        $('textarea').removeClass('is-invalid'); 

        // Custom Validation for Required Fields
        $('textarea[name="purchaser_email_subject_message"], textarea[name="purchaser_email_body_message"], textarea[name="recipient_email_subject_message"], textarea[name="recipient_email_body_message"]').each(function() {
            if (!$(this).val()) { 
                $(this).addClass('is-invalid'); 
                $(this).closest('.main-div').find('.invalid-feedback').text('This field is required'); 
                isValid = false; 
            }
        });

        // Stop if form is invalid
        if (!isValid) {
            return;
        }

        var formData = new FormData(this);
        // formData.append( 'practitioner_id', $("#practitioner_id").val() );
    
        $.ajax({
          type: "post",
          url: "{{ route('practitioner.settings.my_voucher_setting.store') }}",
          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.my.gift.vouchers')}}";     
                // window.location.href = baseUrl;
                window.location.reload();
				
			}, 2000);
            
          }else{

            $('.invalid-feedback').text('');
            $.each(response.errors, function(key, value) {
                console.log(key);
                if (key.startsWith('fixed_price_amount')) {
                    $('input[name="fixed_price_amount[]"]').each(function(index) {
                        if (!$(this).val()) {
                            $(this).addClass('is-invalid'); 
                            $(this).next('.invalid-feedback').text("Amount required").show(); 
                        }
                    });
                }else if (key.startsWith('fixed_price_description')) {
                    $('input[name="fixed_price_description[]"]').each(function(index) {
                        if (!$(this).val()) {
                            $(this).addClass('is-invalid'); 
                            $(this).next('.invalid-feedback').text(value[0]).show(); 
                        }
                    });
                } else {
                   
                    let input = $('input[name=' + key + ']');

                    if (key == 'pricing_type') {

                        $("#pricing_error").next('.invalid-feedback').text(value[0]);

                    } else if (key == 'custom_message') {
                        
                        let textarea = $('textarea[name=' + key + ']');
                        textarea.addClass('is-invalid');
                        textarea.next('.invalid-feedback').text(value[0]);

                    } else {
                        // Generic case for other fields
                        input.addClass('is-invalid');
                        input.next('.invalid-feedback').text(value[0]);
                    }
                }
            });

            // Swal.fire({
            // icon: response.status,
            // title: response.msg,
            // showClass: {
            //   popup: 'animate__animated animate__fadeInDown'
            //   },
            //   hideClass: {
            //     popup: 'animate__animated animate__fadeOutUp'
            //   }
            // })
        }
        }).fail(function (error) {
          $(".loading").removeClass("d-block");
        });
    });

	$(".selprepo").change(function() {
      var val = $(this).val();
      console.log("val: " + val);
      if (val != "" && val != null) {
        var id = $(this).closest(".main-div").find('.append-text').attr("id");
        $(this).closest(".main-div").find('.append-text').trigger('input');
        console.log(id);
        insertAtCaret(id, val);
      }
    });

    // $('.custom-control-input').on('change', function() { // on change of state
    //     if (this.checked) // if changed state is "CHECKED"
    //     {
    //         $('.autosizetextaria').each(function() {
    //             this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
    //         }).on('input', function() {
    //             this.style.height = 'auto';
    //             this.style.height = (this.scrollHeight) + 'px';
    //         });
    //     }
    // }) 

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

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

    function PricingFields() {

        var pricing_type = $("input[name='pricing_type']:checked").val();

        if (typeof pricing_type === 'undefined') {
           
            $('#fixed_price_amount, #customer_price_amount, #add_gst').addClass('d-none');

        } else {

            if (pricing_type == 'fixed') {
                $('#fixed_price_amount').removeClass('d-none');
                $('#customer_price_amount').addClass('d-none');
                $('#add_gst').removeClass('d-none');
            } else if (pricing_type == 'customer') {
                $('#customer_price_amount').removeClass('d-none');
                $('#fixed_price_amount').addClass('d-none');
                $('#add_gst').removeClass('d-none');
            } else {
                $('#fixed_price_amount').removeClass('d-none');
                $('#customer_price_amount').removeClass('d-none');
                $('#add_gst').removeClass('d-none');
            }
        }
    }

    // $("input[name='pricing_type']").on('change', function() { 
    //     var pricing_type = $(this).val();
    //     if(pricing_type == 'fixed'){
    //         $('#fixed_price_amount').removeClass('d-none');
    //         $('#customer_price_amount').addClass('d-none');
    //     }else if(pricing_type == 'customer'){
    //         $('#customer_price_amount').removeClass('d-none');
    //         $('#fixed_price_amount').addClass('d-none');
    //     }else{
    //         $('#fixed_price_amount').removeClass('d-none');
    //         $('#customer_price_amount').removeClass('d-none');

    //     }
    // })  

    function OnlinePurchaseFields() {
        //var isonlinepurchase = $(this).val();
        var isonlinepurchase = $("input[name='is_allow_online_purchase']:checked").val();
        if(isonlinepurchase == '1'){
            $('#purchase_link_div').removeClass('d-none');
        }else{
            $('#purchase_link_div').addClass('d-none');
        }
    }

    function myFunction(val) {
      /* Get the text field */

      var copyText = document.getElementById(val).innerHTML;
      copy = document.getElementById(val);
      copy.select();
      copy.setSelectionRange(0, 99999); /* For mobile devices */
      // /* Copy the text inside the text field */
      document.execCommand("copy");

      Swal.fire({
         icon: 'success',   
         title: 'Purchase link copied',
         showCancelButton: false,
         showConfirmButton: false,
         // cancelButtonText : 'Close',
         showClass: {
            popup: 'animate__animated animate__fadeInDown'
         },
         hideClass: {
            popup: 'animate__animated animate__fadeOutUp'
         }
      });
    

   }

   $(document).on('change','#businessImage', function(e) {
    console.log("hiiiiiiiiiii21222");

   });

   $('#businessImage').on('change', function () {
    console.log("hiiiiiiiiiii");
      imageId = $(this).data('id');
      tempFilename = $(this).val();
      readFile(this);
   });

   var $uploadCrop,
      tempFilename,
      rawImg,
      imageId;

   function readFile(input) {
      if (input.files && input.files[0]) {
         var reader = new FileReader();

         var file = input.files[0];
         var fileType = file.type.split('/')[0];

         if( fileType == 'image' ) {

            reader.onload = function (e) {
               $('#UploadBusinessLogoModal').modal('show');
               rawImg = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
         } else {
            $("#businessImage").val("");
            Swal.fire({
               icon: 'error',
               title: "Only image type supported!",
               showClass: {
                  popup: 'animate__animated animate__fadeInDown'
               },
               hideClass: {
                  popup: 'animate__animated animate__fadeOutUp'
               }
            });
         }
      } else {
         swal("Sorry - you're browser doesn't support the FileReader API");
      }
   }

    $uploadCrop = $('#profile_preview').croppie({
      enableOrientation: true,
      enableResize: true,
      enableZoom: true,
      showZoomer: true,
      viewport: {
        width: 800,
        height: 400,
        type: 'square'
      },
      boundary: {
        width: 800,
        height: 400
      }
    //   viewport: {
    //      width: 250,
    //      height: 250,
    //      type: 'square'
    //   },
    //   boundary: {
    //      width: 260,
    //      height: 260
    //   }
   });

   $('#UploadBusinessLogoModal').on('shown.bs.modal', function(){
      $uploadCrop.croppie('bind', {
         url: rawImg
      }).then(function(){
         console.log('jQuery bind complete');
      });
   });

   $('.crop-picture').on('click', function (ev) {
      $uploadCrop.croppie('result', {
         type: 'canvas',
         size: 'viewport',
         quality: 1
      }).then( function (img) {
        $(".loading").addClass("d-block");
        var image = img;
         $.ajax({
            url: "{{ route('practitioner.store.voucherlogo') }}",
            type: "POST",
            data: {"image":img, "_token" : "{{ csrf_token() }}" },
            success: function (data) {
                $(".loading").removeClass("d-block");
               $("#businessImagePreview").attr( 'src', image );
               $('#default_image').addClass('d-none');
               $("#remove-my-logo").removeClass( 'd-none' );
               $("#UploadBusinessLogoModal").modal("hide");
               Swal.fire({
                  icon: 'success',
                  title: "Image uploaded",
                  showClass: {
                     popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                     popup: 'animate__animated animate__fadeOutUp'
                  }
               });
            }
         });
      });
   });
         
</script>
@endsection