@extends('frontend.provider.app')

@section('content')
<div class="page-wrapper">
    <div class="breadcrumb-bar">
        <div class="container">
            <div class="breadcrumb-item">
                <nav aria-label="breadcrumb" class="page-breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-items"><a href="{{ url('/') }}">{{ __('home') }}</a></li>
                        <li class="breadcrumb-items"><span><i class="isax isax-arrow-right-3"></i></span></li>
                        <li class="breadcrumb-items active" aria-current="page">{{ __('add_new_service') }}</li>
                    </ol>
                </nav>
                <h1 class="breadcrumb-title">{{ __('add_new_service') }}</h1>
            </div>
        </div>
        <img src="{{ asset('/frontend/assets/img/elements/element-01.svg') }}" alt="elements"
            class="img-fluid element-one position-absolute d-none d-lg-block">
        <img src="{{ asset('/frontend/assets/img/elements/element-02.svg') }}" alt="elements"
            class="img-fluid element-two position-absolute d-none d-lg-block">
        <img src="{{ asset('/frontend/assets/img/elements/element-03.svg') }}" alt="elements"
            class="img-fluid element-three position-absolute d-none d-lg-block">
        <img src="{{ asset('/frontend/assets/img/elements/element-04.svg') }}" alt="elements"
            class="img-fluid element-four position-absolute d-none d-lg-block">
        <img src="{{ asset('/frontend/assets/img/elements/element-05.svg') }}" alt="elements"
            class="img-fluid element-five position-absolute d-none d-lg-block">
    </div>
    <div class="content">
        <div class="container">

            <div class="row">

                <div class="col-xl-10 mx-auto">

                    <a href="/provider/service" class="btn btn-white btn-sm d-inline-flex align-items-center mb-4"><i
                            class="isax isax-arrow-left me-1"></i>{{ __('back_to_services') }}</a>

                    <div class="d-flex justify-content-between mb-4">
                        <ul class="nav nav-tabs nav-solid-primary wishlist-tab add-wizard">
                            <li class="nav-item"><a class="nav-link active" href="javascript:void(0);">{{ __('information') }}</a></li>
                            <li class="nav-item"><a class="nav-link" href="javascript:void(0);">{{ __('availability') }}</a></li>
                            <li class="nav-item"><a class="nav-link" href="javascript:void(0);">{{ __('location') }}</a>
                            </li>
                            <li class="nav-item"><a class="nav-link" href="javascript:void(0);">{{ __('gallery') }}</a>
                            </li>
                            <li class="nav-item"><a class="nav-link" href="javascript:void(0);">{{ __('seo') }}</a></li>
                        </ul>
                    </div>

                    <form id="add-service-form">
                        <input type="hidden" name="userLangId" id="userLangId" value="{{ $userLangId }}">
                        <input type="hidden" name="id" id="id" readonly>

                        <div class="form-wizard-content active">
                            <div class="card">
                                <div class="card-body">
                                    <div class="sub-header">
                                        <h5 class="mb-0">{{ __('service_information') }}</h5>
                                    </div>
                                    <div class="row align-items-center g-3">
                                        <div class="col-lg-6 col-md-6">
                                            <label class="form-label">{{ __('service_title') }} <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" name="service_name" id="service_name"
                                                class="form-control" required>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <label class="form-label">{{ __('product_code') }} <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" name="product_code" id="product_code"
                                                class="form-control" required>
                                        </div>
                                        <div class="col-lg-4 col-md-6">
                                            <label class="form-label">{{ __('shop') }} <span
                                                    class="text-danger">*</span></label>
                                            <select class="form-select" name="shop_id" id="shop_id" required>
                                                <option value="">{{ __('select_shop') }}</option>
                                                @foreach ($shopList as $shop)
                                                <option value="{{ $shop->id }}">{{ $shop->shop_name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-lg-4 col-md-6">
                                            <label class="form-label">{{ __('category') }} <span
                                                    class="text-danger">*</span></label>
                                            <select class="select categoryProviderSelect form-select" name="category"
                                                id="category" required>
                                                <option value="">{{ __('select_category') }}</option>
                                                @foreach ($categoriesLang as $category)
                                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-lg-4 col-md-6">
                                            <label class="form-label">{{ __('sub_category') }} <span
                                                    class="text-danger">*</span></label>
                                            <select class="select subcategories form-select" name="sub_category"
                                                id="sub_category" required>
                                                <option value="">{{ __('select_sub_category') }}</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <label class="form-label">{{ __('price') }} <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" name="service_price" id="service_price"
                                                class="form-control" required>
                                        </div>
                                        <div class="col-xl-6 col-md-6">
                                            <label class="form-label" for="price_type">{{ __('price_type') }}
                                                <span class="text-danger">*</span>
                                            </label>
                                            <select name="price_type" id="price_type" class="form-control field-input"
                                                required>
                                                <option value="">{{ __('select_price_type') }}</option>
                                                <option value="fixed">{{ __('fixed') }}</option>
                                                <option value="hourly">{{ __('hourly') }}</option>
                                                <option value="minute">{{ __('minutes') }}</option>
                                                <option value="squre-metter">{{ __('square_meter') }}</option>
                                                <option value="square-feet">{{ __('square_feet') }}</option>
                                            </select>
                                        </div>
                                        <div class="col-xl-3 col-md-6">
                                            <div id="duration-fields-wrapper">
                                                <div class="hours-section" style="display: none;">
                                                    <label class="form-label">{{ __('add_duration_hours') }}
                                                        <span class="text-danger duration-required">*</span>
                                                    </label>
                                                    <input type="text" name="duration_hours" id="hours_select"
                                                        class="form-control" value="1" maxlength="2">
                                                </div>
                                                <div class="minutes-section" style="display: none;">
                                                    <label class="form-label">{{ __('add_minutes') }}
                                                        <span class="text-danger duration-required">*</span>
                                                    </label>
                                                    <select id="minutes_select" name="duration_minute" class="form-control">
                                                        <option value="">{{ __('select_minutes') }}</option>
                                                        @for ($minute = 0; $minute < 60; $minute +=5) <option
                                                            value="{{ $minute }}">
                                                            {{ str_pad($minute, 2, '0', STR_PAD_LEFT) }}
                                                            {{ __('minute') }}{{ $minute != 1 ? 's' : '' }}
                                                            </option>
                                                            @endfor
                                                    </select>
                                                </div>
                                                <div class="feet-section" style="display: none;">
                                                    <label class="form-label">{{ __('add_feet') }}
                                                        <span class="text-danger duration-required">*</span>
                                                    </label>
                                                    <input type="number" name="duration_feet" id="feet_select"
                                                        class="form-control" value="1" min="1" max="9999">
                                                </div>
                                                <div class="meters-section" style="display: none;">
                                                    <label class="form-label">{{ __('add_meters') }}
                                                        <span class="text-danger duration-required">*</span>
                                                    </label>
                                                    <input type="number" name="duration_meters" id="meters_select"
                                                        class="form-control" value="1" min="1" max="9999" step="0.1">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-lg-12">
                                            <label class="form-label d-flex justify-content-between align-items-center">
                                                <span>{{ __('description') }} <span class="text-danger">*</span></span>
                                                @if (isset($chat_status) && $chat_status == 1)
                                                    <span id="chat">
                                                        <a href="javascript:void(0)" id="openChatModal" class="btn btn-sm btn-primary px-2 py-1 fw-medium">
                                                            <img src="{{ asset('front/img/stat.png') }}" alt="" style="width: 16px; height: 16px; margin-right: 4px;">
                                                            {{ __('Generate AI Content') }}
                                                        </a>
                                                    </span>
                                                @endif
                                            </label>
                                            <textarea name="description" id="description" class="form-control mt-2"
                                                rows="5" required></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body">
                                    <div class="sub-header d-flex justify-content-between align-items-center">
                                        <h5 class="mb-0">{{ __('additional_service') }}</h5>
                                        <a href="javascript:void(0);" class="btn btn-primary btn-sm"
                                            id="add-additional-service-btn">
                                            <i class="isax isax-add-circle me-1"></i> {{ __('add_service') }}
                                        </a>
                                    </div>
                                    <div id="additional-services-container" class="mt-3">
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex align-items-center justify-content-end gap-3">
                                <a class="btn btn-white d-flex align-items-center"
                                    href="javascript:void(0);">{{ __('cancel') }}</a>
                                <button type="button"
                                    class="btn btn-secondary next-btn d-inline-flex align-items-center">{{ __('continue') }}<i
                                        class="isax isax-arrow-right-3 ms-2"></i></button>
                            </div>
                        </div>

                        <div class="form-wizard-content">
                            <div class="card">
                                <div class="card-body">
                                    <div class="sub-header">
                                        <h5 class="mb-0">{{ __('availability') }}</h5>
                                    </div>
                                    <div class="accordion available-accordion">
                                        <div class="col-xl-12 col-md-6" id="slotData">
                                            <div class="mb-3 p-1" style="margin-top: 10px;">
                                                @foreach (['monday', 'tuesday', 'wednesday', 'thursday', 'friday',
                                                'saturday', 'sunday'] as $day)
                                                <div class="mb-4" id="{{ strtolower($day) }}Data">
                                                    <div class="d-flex gap-2 mb-2">
                                                        <input type="checkbox" name="day_checkbox[]"
                                                            id="{{ strtolower($day) }}_checkbox" value="{{ $day }}">
                                                        <h6 style="margin-top: 5.2px;">
                                                            {{ __(strtolower($day)) }}
                                                        </h6>
                                                        <a class="add-time-btn"
                                                            style="margin-top: 0px; cursor: pointer;">
                                                            <i class="ti ti-plus me-2 fw-bold"
                                                                style="font-size: 15px;"></i>
                                                        </a>
                                                    </div>
                                                    <div id="slotinputs">
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="accordion-item mb-3">
                                <div class="accordion-header" id="accordion-headingSix">
                                    <div class="accordion-button p-0 translatable d-none real-label"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#accordion-collapseSix"
                                        data-translate="holidays" aria-expanded="true"
                                        aria-controls="accordion-collapseSix" role="button">
                                        {{ __('Holidays') }}
                                    </div>
                                </div>
                                <div id="accordion-collapseSix"
                                    class="accordion-collapse collapse show"
                                    aria-labelledby="accordion-headingSix">
                                    <div class="accordion-body p-3">
                                        <div class="mb-3">
                                            <label class="form-label text-name translatable real-label"
                                                data-translate="holiday">{{ __('holiday_or_unavailability') }}</label>
                                            <a href="javascript:void(0);"
                                                class="text-primary d-inline-flex align-items-center fs-14 ms-2 addServiceHolidayBtn"
                                                data-translate="add_holiday"><i class="ti ti-circle-plus me-1"></i>{{ __('Add Holiday') }}</a>
                                        </div>
                                        <div id="serviceHolidayContainer">
                                            <!-- Initial holiday field will be added by JavaScript -->
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex align-items-center justify-content-end gap-3">
                                <button type="button" class="btn btn-white prev-btn d-inline-flex align-items-center"><i
                                        class="isax isax-arrow-left-2 me-2"></i>{{ __('back') }}</button>
                                <button type="button"
                                    class="btn btn-secondary next-btn d-inline-flex align-items-center">{{ __('continue') }}<i
                                        class="isax isax-arrow-right-3 ms-2"></i></button>
                            </div>
                        </div>

                        <div class="form-wizard-content">
                            <div class="card">
                                <div class="card-body">
                                    <div class="sub-header">
                                        <h5 class="mb-0">{{ __('location') }}</h5>
                                    </div>
                                    <div class="row align-items-center g-3">
                                        <div class="col-lg-12">
                                            <label class="form-label">{{ __('address') }} <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" name="address" id="address" class="form-control"
                                                required>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <label class="form-label">{{ __('country') }} <span
                                                    class="text-danger">*</span></label>
                                            <select class="select" id="country" name="country" required></select>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <label class="form-label">{{ __('state') }} <span
                                                    class="text-danger">*</span></label>
                                            <select class="select" id="state" name="state" required></select>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <label class="form-label">{{ __('city') }} <span
                                                    class="text-danger">*</span></label>
                                            <select class="select" id="city" name="city" required></select>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <label class="form-label">{{ __('postal_code') }} <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" name="pincode" id="pincode" class="form-control"
                                                required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex align-items-center justify-content-end gap-3">
                                <button type="button" class="btn btn-white prev-btn d-inline-flex align-items-center"><i
                                        class="isax isax-arrow-left-2 me-2"></i>{{ __('back') }}</button>
                                <button type="button"
                                    class="btn btn-secondary next-btn d-inline-flex align-items-center">{{ __('continue') }}<i
                                        class="isax isax-arrow-right-3 ms-2"></i></button>
                            </div>
                        </div>

                        <div class="form-wizard-content">
                            <div class="card">
                                <div class="card-body">
                                    <div class="sub-header">
                                        <h5 class="mb-0">{{ __('gallery') }}</h5>
                                    </div>
                                    <div class="mb-3">
                                        <h6 class="mb-3">{{ __('service_images') }} <span class="text-danger">*</span>
                                        </h6>
                                        <div
                                            class="file-upload w-100 d-flex align-items-center justify-content-center flex-column mb-3">
                                            <p class="mb-0">{{ __('drag_drop_or_browse') }}</p>
                                            <input type="file" name="service_images[]" id="service_images"
                                                accept="image/*" multiple required>
                                        </div>
                                        <h6 class="fs-16 fw-medium mb-2">{{ __('image_previews') }}</h6>
                                        <div id="image_preview_container"
                                            class="d-flex align-items-center gap-3 flex-wrap">
                                        </div>
                                    </div>
                                    <div>
                                        <div>
                                            <h6 class="mb-3">{{ __('service_video') }}</h6>
                                            <label class="form-label">{{ __('video_link') }}</label>
                                            <input type="text" name="service_video" id="service_video"
                                                class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex align-items-center justify-content-end gap-3">
                                <button type="button" class="btn btn-white prev-btn d-inline-flex align-items-center"><i
                                        class="isax isax-arrow-left-2 me-2"></i>{{ __('back') }}</button>
                                <button type="button"
                                    class="btn btn-secondary next-btn d-inline-flex align-items-center">{{ __('continue') }}<i
                                        class="isax isax-arrow-right-3 ms-2"></i></button>
                            </div>
                        </div>

                        <div class="form-wizard-content">
                            <div class="card">
                                <div class="card-body">
                                    <div class="sub-header">
                                        <h5 class="mb-0">{{ __('seo') }}</h5>
                                    </div>
                                    <div class="row align-items-center g-3">
                                        <div class="col-lg-6 col-md-6">
                                            <label class="form-label">{{ __('meta_title') }} <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" name="seo_title" id="seo_title" class="form-control"
                                                required>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <label class="form-label">{{ __('meta_keywords') }} <span
                                                    class="text-danger">*</span></label>
                                            <input class="input-tags form-control" name="seo_tag" id="seo_tag"
                                                type="text" data-role="tagsinput" required>
                                        </div>
                                        <div class="col-lg-12">
                                            <label class="form-label">{{ __('meta_description') }} <span
                                                    class="text-danger">*</span></label>
                                            <textarea name="seo_description" id="seo_description" class="form-control"
                                                rows="4" required></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex align-items-center justify-content-end gap-3">
                                <button type="button" class="btn btn-white prev-btn d-inline-flex align-items-center"><i
                                        class="isax isax-arrow-left-2 me-2"></i>{{ __('back') }}</button>
                                <button type="button" class="btn btn-secondary"
                                    id="submit_service_btn">{{ __('add_service') }}</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="chatModal" tabindex="-1" aria-labelledby="chatModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="d-flex align-items-center gap-3">
                    <h6 class="modal-title" id="chatModalLabel">{{ __('chat_with_ai') }}</h6>
                    <i class="ti ti-copy" id="copyChatResponse" style="cursor: pointer;" title="{{ __('copy_response') }}"></i>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="chat-container" style="height: 300px; overflow-y: scroll;">
                    <div id="chat-box">
                        <!-- Chat messages will appear here -->
                    </div>
                </div>
                <div class="input-group mt-3">
                    <input type="text" id="userMessage" name="message" class="form-control" placeholder="Type your message..." />
                    <button class="btn btn-outline-secondary" type="button" id="voiceRecordBtn" title="Record voice">
                        <i class="ti ti-microphone" id="micIcon"></i>
                    </button>
                    <button class="btn btn-primary" id="sendMessage">Send</button>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="provider_service_success_modal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="mb-4">
                    <span class="success-icon mx-auto mb-4">
                        <i class="ti ti-check"></i>
                    </span>
                    <h4 class="mb-1">{{ __('service_created_successfully') }}</h4>
                    <p>{{ __('service_under_review_message') }}</p>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{ asset('front/js/voice-recording.js') }}"></script>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // --- INITIALIZATIONS ---
    if ($('.select').length > 0) {
        $('.select').select2({
            minimumResultsForSearch: -1,
            width: '100%'
        });
    }

    // --- JQUERY VALIDATE SETUP ---
    var form = $("#add-service-form");
    
    // Remove any existing validator
    if (form.data('validator')) {
        form.data('validator', null);
    }

    form.validate({
        errorElement: 'span',
        errorClass: 'error text-danger',
        ignore: [], // Validate ALL fields
        focusInvalid: false,
        onfocusout: function(element) {
            this.element(element); // Validate on focus out
        },
        onkeyup: function(element) {
            this.element(element); // Validate on keyup
        },
        highlight: function(element, errorClass, validClass) {
            $(element).addClass('is-invalid').removeClass('is-valid');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass('is-invalid').addClass('is-valid');
            // Remove any manually added error messages
            $(element).next('.error').remove();
            $(element).next('.select2-container').next('.error').remove();
        },
        errorPlacement: function(error, element) {
            // For Select2 elements
            if (element.hasClass('select2-hidden-accessible')) {
                error.insertAfter(element.next('.select2-container'));
            } 
            // For file inputs
            else if (element.attr('type') === 'file') {
                error.insertAfter(element.parent());
            }
            // For regular elements
            else {
                error.insertAfter(element);
            }
        },
        invalidHandler: function(event, validator) {
            // Show errors immediately when validation fails
            console.log('Validation failed, errors:', validator.errorList);
        },
        rules: {
            service_name: { required: true },
            shop_id: { required: true },
            category: { required: true },
            sub_category: { required: true },
            service_price: { 
                required: true,
                number: true,
                min: 0.01
            },
            price_type: { required: true },
            product_code: { required: true },
            description: { required: true },
            address: { required: true },
            country: { required: true },
            state: { required: true },
            city: { required: true },
            pincode: { 
                required: true,
                digits: true
            },
            'service_images[]': { required: true },
            seo_title: { required: true },
            seo_tag: { required: true },
            seo_description: { required: true }
        },
        messages: {
            service_name: "Please enter a service title.",
            shop_id: "Please select a shop.",
            category: "Please select a category.",
            sub_category: "Please select a sub category.",
            service_price: {
                required: "Please enter a price.",
                number: "Please enter a valid number.",
                min: "Price must be greater than 0."
            },
            price_type: "Please select a price type.",
            product_code: "Please enter the product code.",
            description: "Please enter a description.",
            address: "Please enter an address.",
            country: "Please select a country.",
            state: "Please select a state.",
            city: "Please select a city.",
            pincode: {
                required: "Please enter a postal code.",
                digits: "Please enter a valid postal code."
            },
            'service_images[]': "Please upload at least one service image.",
            seo_title: "Please enter a meta title.",
            seo_tag: "Please enter meta keywords.",
            seo_description: "Please enter a meta description."
        }
    });

    // --- FORCE VALIDATION ON ALL FIELDS ---
    function forceFieldValidation(field) {
        if (field.is(':visible')) {
            field.valid(); // This will trigger validation and show errors
        }
    }

    // --- IMPROVED WIZARD NAVIGATION ---
    let currentStep = 0;
    const totalSteps = 5;

    // Function to activate specific step
    function activateStep(stepIndex) {
        
        if (stepIndex < 0 || stepIndex >= totalSteps) {
            console.error('Invalid step index:', stepIndex);
            return false;
        }

        // Remove active from all tabs and contents
        $('.add-wizard .nav-link').removeClass('active');
        $('.form-wizard-content').removeClass('active').hide();

        // Add active to specific step
        $('.add-wizard .nav-link').eq(stepIndex).addClass('active');
        $('.form-wizard-content').eq(stepIndex).addClass('active').show();

        // Update current step
        currentStep = stepIndex;
        
        return true;
    }

    // Validate current step and show errors immediately
    function validateCurrentStep() {
        const currentStepElement = $('.form-wizard-content').eq(currentStep);
        let isValid = true;

        // Force validation on all required fields in current step
        currentStepElement.find('input[required], select[required], textarea[required]').each(function() {
            const field = $(this);
            if (field.is(':visible')) {
                if (!field.valid()) {
                    isValid = false;
                    // Ensure error is visible
                    field.addClass('is-invalid');
                }
            }
        });

        return isValid;
    }

    // Validate specific step without activating it
    function validateStep(stepIndex) {
        const stepElement = $('.form-wizard-content').eq(stepIndex);
        let isValid = true;

        // Check all required fields in this step
        stepElement.find('input[required], select[required], textarea[required]').each(function() {
            const field = $(this);
            if (field.is(':visible') && !field.valid()) {
                isValid = false;
            }
        });

        return isValid;
    }

    // Next button handler
    $('.next-btn').off('click').on('click', function(e) {
        e.preventDefault();

        if (validateCurrentStep() && currentStep < totalSteps - 1) {
            activateStep(currentStep + 1);
        } else {
            // Scroll to first error in current step
            const firstError = $('.form-wizard-content.active .error').first();
            if (firstError.length) {
                $('html, body').animate({
                    scrollTop: firstError.offset().top - 100
                }, 500);
            }
        }
    });

    // Previous button handler
    $('.prev-btn').off('click').on('click', function(e) {
        e.preventDefault();

        if (currentStep > 0) {
            activateStep(currentStep - 1);
        }
    });

    // Tab click handler for direct navigation
    $('.add-wizard .nav-link').on('click', function(e) {
        e.preventDefault();
        const targetStep = $(this).parent().index();
        
        // Validate all previous steps before allowing navigation
        let canNavigate = true;
        for (let i = 0; i < targetStep; i++) {
            if (!validateStep(i)) {
                canNavigate = false;
                toastr.error(`Please complete step ${i + 1} before moving to step ${targetStep + 1}.`);
                activateStep(i);
                break;
            }
        }
        
        if (canNavigate) {
            activateStep(targetStep);
        }
    });

    // Initialize wizard
    activateStep(0);

    // --- REAL-TIME VALIDATION CLEARING ---
    // Clear validation on input for all fields
    form.find('input, select, textarea').on('input change', function() {
        const field = $(this);
        if (field.val() && field.val().toString().trim() !== '') {
            field.valid(); // Re-validate to clear errors
        }
    });

    // Special handling for Select2
    $('.select').on('select2:select select2:unselect', function() {
        $(this).valid();
    });

    // --- DURATION FIELDS VISIBILITY & AVAILABILITY CLEARING LOGIC ---
    $('#price_type').on('change', function() {
        const type = $(this).val();
        const hoursSection = $('.hours-section');
        const minutesSection = $('.minutes-section');
        const feetSection = $('.feet-section');
        const metersSection = $('.meters-section');
        const durationWrapper = $('#duration-fields-wrapper');
        const hoursInput = $('#hours_select');
        const minutesInput = $('#minutes_select');
        const feetInput = $('#feet_select');
        const metersInput = $('#meters_select');
        const durationRequiredSpans = $('.duration-required');

        // Price types that should hide duration field (only fixed)
        const priceTypesWithoutDuration = ['fixed'];
        
        // Hide all duration sections first
        hoursSection.hide();
        minutesSection.hide();
        feetSection.hide();
        metersSection.hide();
        hoursInput.prop('required', false).val('');
        minutesInput.prop('required', false).val('');
        feetInput.prop('required', false).val('');
        metersInput.prop('required', false).val('');

        if (priceTypesWithoutDuration.includes(type)) {
            // Hide entire duration wrapper for fixed price
            durationWrapper.hide();
            durationRequiredSpans.hide();
            
            // Enable manual end time input for existing availability slots
            $('.end_time').prop('readonly', false);
        } else if (type === 'minute') {
            // Show minutes section for minute price type
            durationWrapper.show();
            minutesSection.show();
            hoursSection.hide();
            feetSection.hide();
            metersSection.hide();
            minutesInput.prop('required', true);
            hoursInput.prop('required', false);
            feetInput.prop('required', false);
            metersInput.prop('required', false);
            durationRequiredSpans.show();
            
            // Make end time readonly for duration-based types
            $('.end_time').prop('readonly', true);
        } else if (type === 'square-feet') {
            // Show feet section for square feet price type
            durationWrapper.show();
            feetSection.show();
            hoursSection.hide();
            minutesSection.hide();
            metersSection.hide();
            feetInput.prop('required', true).val('1');
            hoursInput.prop('required', false);
            minutesInput.prop('required', false);
            metersInput.prop('required', false);
            durationRequiredSpans.show();
            
            // Enable manual end time input for square feet (non-duration based)
            $('.end_time').prop('readonly', false);
        } else if (type === 'squre-metter') {
            // Show meters section for square meter price type
            durationWrapper.show();
            metersSection.show();
            hoursSection.hide();
            minutesSection.hide();
            feetSection.hide();
            metersInput.prop('required', true).val('1');
            hoursInput.prop('required', false);
            minutesInput.prop('required', false);
            feetInput.prop('required', false);
            durationRequiredSpans.show();
            
            // Enable manual end time input for square meter (non-duration based)
            $('.end_time').prop('readonly', false);
        } else if (type) {
            // Show hours section for other price types (hourly)
            durationWrapper.show();
            hoursSection.show();
            minutesSection.hide();
            feetSection.hide();
            metersSection.hide();
            hoursInput.prop('required', true).val('1');
            minutesInput.prop('required', false);
            feetInput.prop('required', false);
            metersInput.prop('required', false);
            durationRequiredSpans.show();
            
            // Make end time readonly for duration-based types
            $('.end_time').prop('readonly', true);
        }
        
        // Clear availability slots when price type changes
        clearAvailabilitySlots();
        
        // Re-validate form
        form.validate().checkForm();
    });

    // Initialize price type change on page load
    $('#price_type').trigger('change');

    // Function to clear all availability slots
    function clearAvailabilitySlots() {
        // Uncheck all day checkboxes
        $('input[name="day_checkbox[]"]').prop('checked', false);
        
        // Clear all time slots
        $('.additional-time').remove();
    
    }

    // Also clear availability when duration hours/minutes change
    $('#hours_select, #minutes_select').on('input change', function() {
        if ($(this).val() && $(this).val() !== $(this).data('previous-value')) {
            $(this).data('previous-value', $(this).val());
            clearAvailabilitySlots();
        }
    });

    // --- CATEGORY & SUBCATEGORY LOGIC ---
    $(".categoryProviderSelect").on("change", function() {
        const categoryId = $(this).val();
        if (categoryId) {
            fetchSubcategories(categoryId);
        } else {
            $(".subcategories").html('<option value="">Select Sub Category</option>').trigger('change');
        }
    });

    function fetchSubcategories(categoryId) {
        $.ajax({
            url: "/api/get-register-subcategories",
            type: "POST",
            data: {
                category_id: categoryId,
                language_code: $('body').data('lang')
            },
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
            },
            success: function(data) {
                let subcategoriesHtml = '<option value="">Select Sub Category</option>';
                data.forEach((subcategory) => {
                    subcategoriesHtml +=
                        `<option value="${subcategory.id}">${subcategory.name}</option>`;
                });
                $(".subcategories").html(subcategoriesHtml).trigger('change');
            },
            error: function() {
                toastr.error("Failed to fetch subcategories.");
            }
        });
    }

    // --- ADDITIONAL SERVICES LOGIC ---
    $('#add-additional-service-btn').on('click', function() {
        const newServiceRow = `
            <div class="row align-items-center g-3 additional-service-row mb-3">
                <div class="col-xl-4 col-lg-6">
                    <label class="form-label">Service Title</label>
                    <input type="text" name="add_name[]" class="form-control">
                </div>
                <div class="col-xl-3 col-lg-6">
                    <label class="form-label">Price</label>
                    <input type="text" name="add_price[]" class="form-control">
                </div>
                <div class="col-xl-3 col-lg-6">
                    <label class="form-label">Duration(hrs)</label>
                    <input type="text" name="add_duration[]" class="form-control">
                </div>
                <div class="col-xl-2 col-lg-6 text-end">
                    <label class="form-label d-block">&nbsp;</label>
                    <a href="javascript:void(0);" class="btn btn-icon btn-light-danger rounded fs-16 flex-shrink-0 remove-service-row"><i class="isax isax-trash"></i></a>
                </div>
            </div>`;
        $('#additional-services-container').append(newServiceRow);
    });

    $(document).on('click', '.remove-service-row', function() {
        $(this).closest('.additional-service-row').remove();
    });

    // --- AVAILABILITY / SLOTS LOGIC ---
    $(document).on("change", "input[name='day_checkbox[]']", function() {
        const checkbox = $(this);
        const container = checkbox.closest(".mb-4");
        const day = container.attr("id").replace("Data", "");
        const priceType = $("#price_type").val();
        
        // Price types that are duration-based (hourly, minute)
        const durationBasedPriceTypes = ['hourly', 'minute'];
        const isEndTimeReadonly = durationBasedPriceTypes.includes(priceType);

        if (checkbox.is(":checked") && container.find('.additional-time').length === 0) {
            const initialTimeInput = `
                <div class="d-flex gap-3 mt-2 additional-time">
                    <input type="time" class="form-control start_time" name="start_time[${day}][]" required>
                    <input type="time" class="form-control end_time" name="end_time[${day}][]" ${isEndTimeReadonly ? 'readonly' : ''}>
                    <a class="p-1 rounded-0 remove-time-btn" style="margin-top: 5px; cursor: pointer;">
                        <i class="ti ti-trash me-2 fw-bold fs-4"></i>
                    </a>
                </div>
            `;
            container.find("#slotinputs").append(initialTimeInput);
        } else if (!checkbox.is(":checked")) {
            container.find("#slotinputs").empty();
        }
    });

    $(document).on("click", ".add-time-btn", function() {
        const container = $(this).closest(".mb-4");
        const day = container.attr("id").replace("Data", "");
        const isChecked = container.find('input[type="checkbox"]').is(":checked");
        const priceType = $("#price_type").val();
        
        // Price types that are duration-based (hourly, minute)
        const durationBasedPriceTypes = ['hourly', 'minute'];
        const isEndTimeReadonly = durationBasedPriceTypes.includes(priceType);

        if (!isChecked) {
            toastr.info("Please select the day first to add time slots.");
            return;
        }

        const newTimeInput = `
            <div class="d-flex gap-3 mt-2 additional-time">
                <input type="time" class="form-control start_time" name="start_time[${day}][]" required>
                <input type="time" class="form-control end_time" name="end_time[${day}][]" ${isEndTimeReadonly ? 'readonly' : ''}>
                <a class="p-1 rounded-0 remove-time-btn" style="margin-top: 5px; cursor: pointer;">
                    <i class="ti ti-trash me-2 fw-bold fs-4"></i>
                </a>
            </div>
        `;
        container.find("#slotinputs").append(newTimeInput);
    });

    $(document).on("click", ".remove-time-btn", function() {
        $(this).closest(".additional-time").remove();
    });

    $(document).on("change", ".start_time", function() {
        const startTimeInput = $(this);
        const selectedHours = $("#hours_select").val();
        const selectedMinutes = $("#minutes_select").val();
        const selectedFeet = $("#feet_select").val();
        const selectedMeters = $("#meters_select").val();
        const startTime = startTimeInput.val();
        const timeSlotDiv = startTimeInput.closest(".d-flex");
        const endTimeInput = timeSlotDiv.find(".end_time");
        const priceType = $("#price_type").val();

        // Price types that don't require duration (only fixed)
        const priceTypesWithoutDuration = ['fixed'];
        
        // Price types that are non-duration based (fixed, square feet, square meter)
        const nonDurationPriceTypes = ['fixed', 'square-feet', 'squre-metter'];

        if (!startTime) {
            endTimeInput.val("");
            return;
        }

        // For non-duration price types, allow manual end time selection
        if (nonDurationPriceTypes.includes(priceType)) {
            // Remove readonly attribute to allow manual input
            endTimeInput.prop('readonly', false);
            // Don't auto-calculate end time
            return;
        }

        // For duration-based price types, check for duration and auto-calculate
        if (!selectedHours && !selectedMinutes) {
            toastr.error("Please set a service duration in the 'Information' tab first.");
            startTimeInput.val("");
            endTimeInput.val("");
            return;
        }

        // Ensure end time is readonly for duration-based types
        endTimeInput.prop('readonly', true);

        if ((selectedHours || selectedMinutes) && startTime) {
            const [startHour, startMinute] = startTime.split(":").map(Number);
            let endHour = startHour;
            let endMinute = startMinute;

            if (selectedHours) {
                endHour += parseInt(selectedHours);
            }
            if (selectedMinutes) {
                endMinute += parseInt(selectedMinutes);
            }

            endHour += Math.floor(endMinute / 60);
            endMinute = endMinute % 60;
            endHour = endHour % 24;

            const formattedEndTime =
                `${endHour.toString().padStart(2, "0")}:${endMinute.toString().padStart(2, "0")}`;
            endTimeInput.val(formattedEndTime);
        } else {
            endTimeInput.val("");
            return;
        }

        const currentStartTime = startTimeInput.val();
        const currentEndTime = endTimeInput.val();
        const dayContainer = startTimeInput.closest(".mb-4");
        let isOverlapping = false;

        if (!currentStartTime || !currentEndTime) return;

        dayContainer.find(".additional-time").each(function() {
            const otherSlot = $(this);
            if (otherSlot.is(timeSlotDiv)) {
                return;
            }

            const existingStartTime = otherSlot.find(".start_time").val();
            const existingEndTime = otherSlot.find(".end_time").val();

            if (existingStartTime && existingEndTime) {
                if (currentStartTime < existingEndTime && existingStartTime < currentEndTime) {
                    isOverlapping = true;
                    return false;
                }
            }
        });

        if (isOverlapping) {
            toastr.error(
                "The selected time overlaps with another slot. Please select a different time.");
            startTimeInput.val("");
            endTimeInput.val("");
            startTimeInput.focus();
        }
    });

    // --- LOCATION DROPDOWNS LOGIC ---
    let cachedCountries = [], cachedStates = [], cachedCities = [];
    $.when(
        $.getJSON("/countries.json"),
        $.getJSON("/states.json"),
        $.getJSON("/cities.json")
    ).done(function(countriesData, statesData, citiesData) {
        cachedCountries = countriesData[0].countries;
        cachedStates = statesData[0].states;
        cachedCities = citiesData[0].cities;
        populateCountries();
    });

    function populateCountries() {
        const countrySelect = $("#country");
        countrySelect.empty().append('<option value="">Select Country</option>');
        $.each(cachedCountries, (i, country) => {
            countrySelect.append($('<option>', {
                value: country.id,
                text: country.name
            }));
        });
    }
    
    $('#country').on('change', function() {
        const states = cachedStates.filter(state => state.country_id == $(this).val());
        const stateSelect = $('#state').empty().append('<option value="">Select State</option>');
        $.each(states, (i, state) => {
            stateSelect.append($('<option>', {
                value: state.id,
                text: state.name
            }));
        });
        $('#city').empty().append('<option value="">Select City</option>').trigger('change');
        stateSelect.trigger('change');
    });
    
    $('#state').on('change', function() {
        const cities = cachedCities.filter(city => city.state_id == $(this).val());
        const citySelect = $('#city').empty().append('<option value="">Select City</option>');
        $.each(cities, (i, city) => {
            citySelect.append($('<option>', {
                value: city.id,
                text: city.name
            }));
        });
        citySelect.trigger('change');
    });

    // --- GALLERY IMAGE UPLOAD & PREVIEW ---
    let selectedFiles = new DataTransfer();
    $('#service_images').on('change', function(event) {
        Array.from(event.target.files).forEach(file => {
            selectedFiles.items.add(file);
            previewImage(file);
        });
        this.files = selectedFiles.files;
        
        // Clear file validation error
        $(this).next('.error').remove();
        $(this).removeClass('is-invalid').addClass('is-valid');
    });

    function previewImage(file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const previewHtml = `
                <div class="text-center gallery-preview-item">
                    <div class="gallery-upload-img mb-2">
                        <img src="${e.target.result}" alt="${file.name}">
                        <span class="trash-icon d-flex align-items-center justify-content-center gallery-trash" data-name="${file.name}"><i class="isax isax-close-circle5"></i></span>
                    </div>
                </div>`;
            $('#image_preview_container').append(previewHtml);
        };
        reader.readAsDataURL(file);
    }
    
    $(document).on('click', '.gallery-trash', function() {
        const fileName = $(this).data('name');
        $(this).closest('.gallery-preview-item').remove();
        const newFiles = new DataTransfer();
        Array.from(selectedFiles.files)
            .filter(file => file.name !== fileName)
            .forEach(file => newFiles.items.add(file));
        selectedFiles = newFiles;
        $('#service_images')[0].files = selectedFiles.files;
        
        // Update validation
        if (selectedFiles.files.length === 0) {
            $('#service_images').addClass('is-invalid').removeClass('is-valid');
        } else {
            $('#service_images').removeClass('is-invalid').addClass('is-valid');
            $('#service_images').next('.error').remove();
        }
    });

    // --- IMPROVED FINAL SUBMISSION WITH FORCED VALIDATION ---
    $("#submit_service_btn").on("click", function(event) {
        event.preventDefault();

        // Force validation on ALL steps immediately
        let allValid = true;
        let firstInvalidStep = -1;

        // Validate each step and force error display
        for (let i = 0; i < totalSteps; i++) {
            const stepElement = $('.form-wizard-content').eq(i);
            let stepValid = true;

            // Force validation on all required fields in this step
            stepElement.find('input[required], select[required], textarea[required]').each(function() {
                const field = $(this);
                if (!field.valid()) {
                    stepValid = false;
                    allValid = false;
                    if (firstInvalidStep === -1) {
                        firstInvalidStep = i;
                    }
                    // Force error display by triggering validation
                    field.addClass('is-invalid');
                    field.valid(); // This will show the error message
                }
            });
        }

        if (!allValid) {
            // Activate the first invalid step
            activateStep(firstInvalidStep);
            
            toastr.error("Please fill all the required fields in every section.");
            
            // Scroll to top of the invalid step
            $('html, body').animate({
                scrollTop: $('.form-wizard-content.active').offset().top - 100
            }, 500);
            
            return false;
        }

        // Prepare FormData
        let finalFormData = new FormData(form[0]);

        // Handle service images
        finalFormData.delete('service_images[]');
        for (let i = 0; i < selectedFiles.files.length; i++) {
            finalFormData.append("service_images[]", selectedFiles.files[i]);
        }

        // Prepare availability data
        let dayCheckbox = [];
        let startTimeData = {};
        let endTimeData = {};

        $('input[name="day_checkbox[]"]:checked').each(function() {
            const day = $(this).val();
            dayCheckbox.push(day);
            const dayKeyForSelector = day.toLowerCase();

            startTimeData[day] = [];
            endTimeData[day] = [];

            $(`input[name="start_time[${dayKeyForSelector}][]"]`).each(function(index) {
                const startTime = $(this).val();
                const endTime = $(`input[name="end_time[${dayKeyForSelector}][]"]`).eq(index).val();

                if (startTime && endTime) {
                    startTimeData[day].push(startTime);
                    endTimeData[day].push(endTime);
                } else {
                    // Show error if any slot is empty
                    $(this).after('<span class="error text-danger">Start and end time required</span>');
                    allValid = false;
                }
            });
        });

        if (!allValid) {
            toastr.error("Please fix highlighted errors before submitting.");
            return false;
        }

        finalFormData.append("day_checkbox", JSON.stringify(dayCheckbox));
        finalFormData.append("start_time", JSON.stringify(startTimeData));
        finalFormData.append("end_time", JSON.stringify(endTimeData));

        finalFormData.delete('holiday_full_day[]');
        finalFormData.delete('holiday[]');
        finalFormData.delete('holiday_start_time[]');
        finalFormData.delete('holiday_end_time[]');
        
        // Handle array fields properly to preserve indices
        const arrayFieldNames = ['holiday', 'holiday_start_time', 'holiday_end_time'];
        
        // Collect array data with proper indices directly from form (excluding checkboxes)
        arrayFieldNames.forEach(fieldName => {
            $(`input[name="${fieldName}[]"], select[name="${fieldName}[]"]`).each(function(index) {
                const value = $(this).val();
                if (value !== undefined && value !== '') {
                    finalFormData.append(`${fieldName}[${index}]`, value);
                } else if (fieldName.includes('time')) {
                    // For time fields, include even empty values to maintain indices
                    finalFormData.append(`${fieldName}[${index}]`, '');
                }
            });
        });

        // Handle checkbox arrays separately (they may be unchecked)
        $(`input[type="checkbox"][name="holiday_full_day[]"]`).each(function(index) {
            if ($(this).is(':checked')) {
                finalFormData.append(`holiday_full_day[${index}]`, 'on');
            }
        });

        // Submit via AJAX
        $.ajax({
            url: "/provider/service/save",
            method: "POST",
            data: finalFormData,
            dataType: "json",
            contentType: false,
            processData: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr("content")
            },
            beforeSend: function() {
                $("#submit_service_btn").attr("disabled", true).html(
                    '<span class="spinner-border spinner-border-sm"></span> Loading...');
            },
            success: function(response) {
                $("#submit_service_btn").removeAttr("disabled").html('Add Service');
                if (response.service_approval_status == 1) {
                    $("#provider_service_success_modal").modal(
                        "show"
                    );
                    setTimeout(function () {
                        window.location.href =
                            response.redirect_url;
                    }, 2000);
                    return;
                } 
                if (response.code === 200) {
                    toastr.success(response.message || "Service added successfully.");
                    setTimeout(function() {
                        window.location.href = response.redirect_url;
                    }, 2000);
                } else {
                    toastr.error(response.message || "An unknown error occurred.");
                }
            },
            error: function(xhr) {
                $("#submit_service_btn").removeAttr("disabled").html('Add Service');
                let errorMsg = "An error occurred. Please try again.";

                if (xhr.responseJSON) {
                    if (xhr.responseJSON.errors) {
                        errorMsg = Object.values(xhr.responseJSON.errors).flat().join('<br>');
                    } else if (typeof xhr.responseJSON === 'object') {
                        errorMsg = Object.values(xhr.responseJSON).flat().join('<br>');
                    } else if (xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    }
                }

                toastr.error(errorMsg);
            }
        });
    });

    // --- CHAT MODAL FUNCTIONALITY ---
    $('#openChatModal').click(function(e) {
        e.preventDefault();
        $('#chatModal').modal('show');
    });

    // Send message functionality
    $('#sendMessage').click(function() {
        const message = $('#userMessage').val().trim();
        if (!message) {
            toastr.error('Please enter a message');
            return;
        }

        // Add user message to chat
        const userMessageHtml = `
            <div class="d-flex justify-content-end mb-2">
                <div class="bg-primary text-white p-2 rounded" style="max-width: 70%;">
                    ${message}
                </div>
            </div>
        `;
        $('#chat-box').append(userMessageHtml);

        // Clear input
        $('#userMessage').val('');

        // Show loading indicator
        const loadingHtml = `
            <div class="d-flex justify-content-start mb-2">
                <div class="bg-light p-2 rounded" style="max-width: 70%;">
                    <div class="spinner-border spinner-border-sm" role="status"></div>
                    <span class="ms-2">AI is thinking...</span>
                </div>
            </div>
        `;
        $('#chat-box').append(loadingHtml);

        // Scroll to bottom
        $('#chat-container').scrollTop($('#chat-container')[0].scrollHeight);

        // Send AJAX request to AI
        $.ajax({
            url: '/api/ai-chat',
            method: 'POST',
            data: {
                message: message,
                _token: $('meta[name="csrf-token"]').attr("content")
            },
            success: function(response) {
                // Remove loading indicator
                $('#chat-box .spinner-border').parent().parent().remove();

                if (response.code === 200 && response.data) {
                    const aiMessageHtml = `
                        <div class="d-flex justify-content-start mb-2">
                            <div class="bg-light p-2 rounded" style="max-width: 70%;">
                                ${response.data}
                            </div>
                        </div>
                    `;
                    $('#chat-box').append(aiMessageHtml);
                } else {
                    const errorHtml = `
                        <div class="d-flex justify-content-start mb-2">
                            <div class="bg-danger text-white p-2 rounded" style="max-width: 70%;">
                                ${response.error || 'Sorry, I encountered an error. Please try again.'}
                            </div>
                        </div>
                    `;
                    $('#chat-box').append(errorHtml);
                }
                
                // Scroll to bottom
                $('#chat-container').scrollTop($('#chat-container')[0].scrollHeight);
            },
            error: function() {
                // Remove loading indicator
                $('#chat-box .spinner-border').parent().parent().remove();

                const errorHtml = `
                    <div class="d-flex justify-content-start mb-2">
                        <div class="bg-danger text-white p-2 rounded" style="max-width: 70%;">
                            Sorry, I encountered an error. Please try again.
                        </div>
                    </div>
                `;
                $('#chat-box').append(errorHtml);
                
                // Scroll to bottom
                $('#chat-container').scrollTop($('#chat-container')[0].scrollHeight);
            }
        });
    });

    // Copy chat response functionality
    $('#copyChatResponse').click(function() {
        const chatMessages = $('#chat-box').text();
        navigator.clipboard.writeText(chatMessages).then(function() {
            toastr.success('Chat copied to clipboard!');
        }).catch(function() {
            toastr.error('Failed to copy chat');
        });
    });

    // Allow Enter key to send message
    $('#userMessage').keypress(function(e) {
        if (e.which === 13) {
            e.preventDefault();
            $('#sendMessage').click();
        }
    });

    // --- HOLIDAY FULL DAY TOGGLE LOGIC ---
    $(document).on('change', '.holiday-full-day-toggle', function() {
        const checkbox = $(this);
        const timeFields = checkbox.closest('.row').siblings('.holiday-time-fields');
        
        if (checkbox.is(':checked')) {
            // Hide time fields when full day is checked
            timeFields.hide();
            // Clear time values
            timeFields.find('.holiday-start-time, .holiday-end-time').val('');
        } else {
            // Show time fields when full day is unchecked
            timeFields.show();
        }
    });

    // --- DYNAMIC HOLIDAY FIELD FUNCTIONALITY ---
    let holidayIndex = 0;
    
    // Function to add new holiday field
    function addServiceHolidayField(holidayData = null) {
        // Count existing holiday items to determine if this is the first field
        const existingFields = document.querySelectorAll('#serviceHolidayContainer .holiday-item').length;
        const isFirstField = existingFields === 0;
        
        const holidayHtml = `
            <div class="holiday-item mb-3">
                <div class="row">
                    <div class="col-xl-4">
                        <div class="mb-3">
                            <div class="input-icon position-relative">
                                <input type="date" class="form-control" name="holiday[]" placeholder="dd-mm-yyyy" value="${holidayData?.date || ''}">
                                <span class="text-danger error-text"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2">
                        <div class="mt-2">
                            <div class="form-check">
                                <input class="form-check-input holiday-full-day-toggle" type="checkbox" name="holiday_full_day[]" ${holidayData?.full_day === true ? 'checked' : ''} checked>
                                <label class="form-check-label">
                                    {{ __('Full Day') }}
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-2 ${isFirstField ? 'd-none' : ''}">
                        <div class="mt-2">
                            <button type="button" class="btn btn-sm btn-danger remove-service-holiday">
                                <i class="ti ti-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row holiday-time-fields" style="display: none;">
                    <div class="col-xl-6">
                        <div class="mb-3">
                            <label class="form-label">{{ __('Start Time') }}</label>
                            <input type="time" class="form-control holiday-start-time" name="holiday_start_time[]" value="${holidayData?.start_time || ''}">
                        </div>
                    </div>
                    <div class="col-xl-6">
                        <div class="mb-3">
                            <label class="form-label">{{ __('End Time') }}</label>
                            <input type="time" class="form-control holiday-end-time" name="holiday_end_time[]" value="${holidayData?.end_time || ''}">
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        document.getElementById('serviceHolidayContainer').insertAdjacentHTML('beforeend', holidayHtml);
    }
    
    // Initialize with one empty holiday field
    addServiceHolidayField();
    
    // Add holiday button click event
    $(document).on('click', '.addServiceHolidayBtn', function(e) {
        e.preventDefault();
        addServiceHolidayField();
    });
    
    // Remove holiday button click event (event delegation)
    $(document).on('click', '.remove-service-holiday', function(e) {
        e.preventDefault();
        $(this).closest('.holiday-item').remove();
    });

});
</script>
@endpush