JezK

Edit File: backup

<div class="offcanvas offcanvas-end" tabindex="-1" id="addVisitorForm" aria-labelledby="addVisitorFormLabel">
    <div class="offcanvas-header">
        <h5 id="addVisitorFormLabel" class="addButtonStyle">Add New Visitor</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body container mt-0">
    <form action="#" method="POST">
        @csrf
        
        <div id="customerRequirementsContainer">
        <div class="customer-requirement mb-4 p-3 mt-3" style="background-color: #D6DBE9; border-radius: 10px;">
            <h5 class="fontstyle">Customer 1</h5>
            <div class="row mb-3 d-flex justify-content-between">
                    <div class="col-md">
                        <div class="custom-checkbox-group">
                            
                            <label class="custom-checkbox">
                            <input type="checkbox" class="checkbox-input">
                            <span class="checkbox-icon"></span>
                            </label>
                            <label class="form-check-label subtextstyle" for="workStatus1">Work Status</label>
                        </div>
                    </div>
                    <div class="col-md ">
                        <div class="custom-checkbox-group">
                            
                            <label class="custom-checkbox">
                            <input type="checkbox" class="checkbox-input">
                            <span class="checkbox-icon"></span>
                            </label>
                            <label class="form-check-label subtextstyle" for="workStatus1">Work Status</label>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="custom-checkbox-group">
                            
                            <label class="custom-checkbox">
                            <input type="checkbox" class="checkbox-input">
                            <span class="checkbox-icon"></span>
                            </label>
                            <label class="form-check-label subtextstyle" for="workStatus1">Work Status</label>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="custom-checkbox-group">
                            
                            <label class="custom-checkbox">
                            <input type="checkbox" class="checkbox-input">
                            <span class="checkbox-icon"></span>
                            </label>
                            <label class="form-check-label subtextstyle" for="workStatus1">Work Status</label>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="custom-checkbox-group">
                            
                            <label class="custom-checkbox">
                            <input type="checkbox" class="checkbox-input">
                            <span class="checkbox-icon"></span>
                            </label>
                            <label class="form-check-label subtextstyle" for="workStatus1">Work Status</label>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="custom-checkbox-group">
                            
                            <label class="custom-checkbox">
                            <input type="checkbox" class="checkbox-input">
                            <span class="checkbox-icon"></span>
                            </label>
                            <label class="form-check-label subtextstyle" for="workStatus1">Work Status</label>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="custom-checkbox-group">
                            
                            <label class="custom-checkbox">
                            <input type="checkbox" class="checkbox-input">
                            <span class="checkbox-icon"></span>
                            </label>
                            <label class="form-check-label subtextstyle" for="workStatus1">Work Status</label>
                        </div>
                    </div>
                    
                    
                
                </div>
            <div class="row mb-3">
            <div class="row mb-3" >
            <div class="row mb-3">
            <div class="col-md-7">
                <label for="purpose" class="form-label subtextstyle">Customer Name</label>
                <select class="form-select" id="purpose">
                    <option selected>Commission Agent Appointment</option>
                    <option value="1">Option 1</option>
                </select>
            </div>

<div class="col-md-5 d-flex align-items-end">
                <button type="button" class="btn addbtnform ms-2" id="addNewCustomerButton">
                    + Add New Customer
                </button>
            </div>
        </div>

<div class="col-md-7">
                    <label for="service" class="form-label subtextstyle">Purpose</label>
                    <select class="form-select" id="service" name="service_id" onchange="checkPeriodType()">
                        <option selected disabled>Select a Service</option>
                        @foreach($services as $service)
                            <option value="{{ $service->id }}" data-period-type="{{ $service->period_type }}">
                                {{ $service->service_name }}
                            </option>
                        @endforeach
                    </select>
                    @error('service_id')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

<div class="col-md-7" id="additionalOptions" style="display: none;">
                    <label for="additionalInput" class="form-label subtextstyle">Options</label>
                    <select class="form-select" id="additionalInput" name="additional_option" onchange="checkAdditionalOption()">
                        <option selected disabled>Select an Option</option>
                        <option value="decision">Decision</option>
                        <option value="work_order_now">Work Order Now</option>
                        <option value="future_work_order">Future Work Order - Date Based</option>
                        <option value="follow_up">Follow Up - Date Based</option>
                    </select>
                    @error('additional_option')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

<div class="col-md-7" id="dateInputWrapper" style="display: none;">
                    <label for="dateInput" class="form-label subtextstyle">Select Date</label>
                    <input type="date" class="form-control" id="dateInput" name="date_input">
                    @error('date_input')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

<div class="row" id="monthlyOptions" style="display: none;">
                    <div class="col-md-6">
                        <label for="monthInput" class="form-label subtextstyle">Select Month</label>
                        <select class="form-select" id="monthInput" name="month_input">
                            <option selected disabled>Select a Month</option>
                            @foreach(['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] as $month)
                                <option value="{{ strtolower($month) }}">{{ $month }}</option>
                            @endforeach
                        </select>
                        @error('month_input')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

<div class="col-md-6">
                        <label for="yearInput" class="form-label subtextstyle">Select Year</label>
                        <select class="form-select" id="yearInput" name="year_input">
                            <option selected disabled>Select a Year</option>
                            @php
                                $currentYear = date('Y');
                                for ($i = 0; $i < 12; $i++) {
                                    echo "<option value='" . ($currentYear - $i) . "'>" . ($currentYear - $i) . "</option>";
                                }
                            @endphp
                        </select>
                        @error('year_input')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

<div class="row" id="quartlyOptions" style="display: none;">
                    <div class="col-md-6">
                        <label for="monthInput3" class="form-label subtextstyle">Select Months (Quarterly)</label>
                        <select class="form-select" id="monthInput3" name="month_input_3">
                            <option selected disabled>Select a Quarter</option>
                            <option value="jan,feb,mar">Jan, Feb, Mar</option>
                            <option value="apr,may,jun">Apr, May, Jun</option>
                            <option value="jul,aug,sep">Jul, Aug, Sep</option>
                            <option value="oct,nov,dec">Oct, Nov, Dec</option>
                        </select>
                        @error('month_input_3')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

<div class="row" id="halaflyOptions" style="display: none;">
                    <div class="col-md-6">
                        <label for="monthInput4" class="form-label subtextstyle">Select Half-Yearly Period</label>
                        <select class="form-select" id="monthInput4" name="month_input_4">
                            <option selected disabled>Select Months</option>
                            <option value="jan,feb,mar,apr,may,jun">Jan - Jun</option>
                            <option value="jul,aug,sep,oct,nov,dec">Jul - Dec</option>
                        </select>
                        @error('month_input_4')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

<div class="row" id="yearOptions" style="display: none;">
                    <div class="col-md-12">
                        <label for="yearInput3" class="form-label subtextstyle">Select Year</label>
                        <select class="form-select" id="yearInput3" name="year_input_3">
                            <option selected disabled>Select a Year</option>
                            @php
                                $yearRanges = [];
                                for ($i = -7; $i < 0; $i++) {
                                    $startYear = $currentYear + $i;
                                    $endYear = $startYear + 1;
                                    $yearRanges[] = "$startYear-$endYear";
                                }
                                for ($i = 0; $i < 4; $i++) {
                                    $startYear = $currentYear + $i;
                                    $endYear = $startYear + 1;
                                    $yearRanges[] = "$startYear-$endYear";
                                }
                                foreach ($yearRanges as $range) {
                                    echo "<option value='$range'>$range</option>";
                                }
                            @endphp
                        </select>
                        @error('year_input_3')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                
                <div class="mb-4">
                <label for="notes" class="form-label">Notes</label>
                <textarea class="form-control" id="notes" name="notes" rows="3"></textarea>
            </div>
            </div>

<div class="row">
                <div class="col-md-6 mt-3">
                    <button type="button" class="btn addbtnform w-80">+ Add another purpose</button>
                </div>
            </div>

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

<div class="mb-4">
            
            <div class="col-md-6 mt-4">
    <button type="button" id="addCustomerRequirementButton" class="btn addbtnstyle1 w-80">+ Add another Customer requirement</button>
</div>

<label for="remarks" class="form-label">Remarks</label>
                <textarea class="form-control" id="remarks" name="remarks" rows="3"></textarea>
            </div>
            
            <div class="row mt-3 mb-3 d-flex justify-content-end">
                <div class="col-md-2">
                    <button type="reset" class="btn addbtnstyle2 w-100 mt-3">Cancel</button>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn addbtnstyle1 w-100 mt-3">Save</button>
                </div>
            </div>
</div>

// Show or hide options based on the selected period type
        additionalOptions.style.display = "block"; // Show additional options dropdown
        monthlyOptions.style.display = "none"; // Hide monthly options
        dateInputWrapper.style.display = "none"; // Hide date input
        halaflyOptions.style.display = "none"; // Hide halafly options
        quartlyOptions.style.display = "none"; // Hide quartly options
        yearOptions.style.display = "none"; // Initially hide year options

switch (periodType) {
            case "1":
                break; // No additional action for type 1
            case "2":
                monthlyOptions.style.display = "block"; // Show monthly options
                break;
            case "3":
                quartlyOptions.style.display = "block"; // Show quartly options
                yearOptions.style.display = "block"; // Show year options for AY

break;
            case "4":
                halaflyOptions.style.display = "block"; // Show halafly options
                yearOptions.style.display = "block"; // Show year options for AY

break;
            case "5":
                yearOptions.style.display = "block"; // Show year options for FY
                break;
            case "6":
                yearOptions.style.display = "block"; // Show year options for AY
                break;
        }
    }

function checkAdditionalOption() {
        const additionalSelect = document.getElementById("additionalInput");
        const selectedValue = additionalSelect.value;
        const dateInputWrapper = document.getElementById("dateInputWrapper");

let customerCount = 1;

document.getElementById('addCustomerRequirementButton').addEventListener('click', function() {
    customerCount++;

// Clone the customer requirement div
    let customerTemplate = document.querySelector('.customer-requirement').cloneNode(true);
    
    // Update the title and IDs in the cloned template
    customerTemplate.querySelector('h5').innerText = 'Customer ' + customerCount;
    
    // Update the IDs and names for the form fields
    let selectCustomer = customerTemplate.querySelector('select');
    selectCustomer.id = 'customerName' + customerCount;

// Append the cloned template to the container
    document.getElementById('customerRequirementsContainer').appendChild(customerTemplate);
});

</script>

backup 2
<style>
    .offcanvas-end {
        background-color: #EAEDF4;
        width: 90%; /* Set a maximum width for the form */
    }
</style>

<div class="col-md-7 additionalOptions" style="display: none;">
                            <label for="additionalInput" class="form-label subtextstyle">Options</label>
                            <select class="form-select" name="additional_option[]" onchange="checkAdditionalOption(this)">
                                <option selected disabled>Select an Option</option>
                                <option value="decision">Decision</option>
                                <option value="work_order_now">Work Order Now</option>
                                <option value="future_work_order">Future Work Order - Date Based</option>
                                <option value="follow_up">Follow Up - Date Based</option>
                                <option value="yearly">Yearly</option> 
                            </select>
                            @error('additional_option.*')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

<div class="col-md-7 dateInputWrapper" style="display: none;">
                            <label for="dateInput" class="form-label subtextstyle">Select Date</label>
                            <input type="date" class="form-control" name="date_input[]">
                            @error('date_input.*')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
    
    <div class="row" id="quartlyOptions" style="display: none;">
        <div class="col-md-6">
            <label for="monthInput3" class="form-label subtextstyle">Select Month (Quarterly)</label>
            <select class="form-select" id="monthInput3" name="month_input_3">
                <option selected disabled>Select a Month</option>
                <option value="jan,feb,mar">Jan, Feb, Mar</option>
                <option value="apr,may,jun">Apr, May, Jun</option>
                <option value="jul,aug,sep">Jul, Aug, Sep</option>
                <option value="oct,nov,dec">Oct, Nov, Dec</option>
            </select>
            @error('month_input_3')
                <span class="text-danger">{{ $message }}</span>
            @enderror
        </div>
    </div>

<div class="row" id="halaflyOptions" style="display: none;">
    <div class="col-md-6">
        <label for="monthInput4" class="form-label subtextstyle">Select Half-Yearly Months</label>
        <select class="form-select" id="monthInput4" name="month_input_4">
            <option selected disabled>Select a Month</option>
            <option value="jan,feb,mar,apr,may,jun">Jan, Feb, Mar, Apr, May, Jun</option>
            <option value="jul,aug,sep,oct,nov,dec">Jul, Aug, Sep, Oct, Nov, Dec</option>
        </select>
        @error('month_input_4')
            <span class="text-danger">{{ $message }}</span>
        @enderror
    </div>
</div>

<div class="row monthlyOptions" style="display: none;">
                            <div class="col-md-6">
                                <label for="monthInput" class="form-label subtextstyle">Select Month</label>
                                <select class="form-select" name="month_input[]">
                                    <option selected disabled>Select a Month</option>
                                    @foreach (['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] as $month)
                                        <option value="{{ strtolower($month) }}">{{ $month }}</option>
                                    @endforeach
                                </select>
                                @error('month_input.*')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>

<div class="col-md-6">
                                <label for="yearInput" class="form-label subtextstyle">Select Year</label>
                                <select class="form-select" name="year_input[]">
                                    <option selected disabled>Select a Year</option>
                                    @php
                                        $currentYear = date('Y');
                                        for ($i = 0; $i < 12; $i++) {
                                            echo "<option value='" . ($currentYear - $i) . "'>" . ($currentYear - $i) . "</option>";
                                        }
                                    @endphp
                                </select>
                                @error('year_input.*')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

<div class="col-md-7 yearlyOptions" style="display: none;">
                            <label for="yearlyInput" class="form-label subtextstyle">Select Yearly Option</label>
                            <select class="form-select" name="yearly_input[]">
                                <option selected disabled>Select a Year</option>
                                @php
                                    $currentYear = date('Y');
                                    for ($i = 0; $i < 12; $i++) {
                                        echo "<option value='" . ($currentYear - $i) . "'>" . ($currentYear - $i) . "</option>";
                                    }
                                @endphp
                            </select>
                            @error('yearly_input.*')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

<div class="row">
                <div class="col-md-6 mt-3">
                    <button type="button" class="btn addbtnform w-80" onclick="addCustomerRequirement()">
                        + Add another Customer requirement
                    </button>
                </div>
            </div>

// Show or hide options based on the selected period type
        additionalOptions.style.display = "block"; // Show additional options dropdown
        monthlyOptions.style.display = "none"; // Hide monthly options
        dateInputWrapper.style.display = "none"; // Hide date input
        yearlyOptions.style.display = "none"; // Hide yearly options
        quartlyOptions.style.display = "none"; // Hide quarterly options
        halaflyOptions.style.display = "none"; // Hide half-yearly options

switch (periodType) {
            case "2":
                monthlyOptions.style.display = "block"; // Show monthly options
                break;
            case "3":
                quartlyOptions.style.display = "block"; // Show quarterly options
                break;
            case "4": // Added case for half-yearly
                halaflyOptions.style.display = "block"; // Show half-yearly options
                break;
            case "1":
                dateInputWrapper.style.display = "block"; // Show date input
                break;
            case "5": // Show yearly options if yearly (FY) is selected
                yearlyOptions.style.display = "block"; // Show yearly (FY) options
                break;
            case "6": // Show yearly options if yearly (AY) is selected
                yearlyOptions.style.display = "block"; // Show yearly (AY) options
                break;
        }
    }

function checkAdditionalOption(selectElement) {
        const selectedValue = selectElement.value;
        const customerSection = selectElement.closest('.customer-section');
        const dateInputWrapper = customerSection.querySelector(".dateInputWrapper");
        const yearlyOptions = customerSection.querySelector(".yearlyOptions");

// Show or hide the date input based on the selected additional option
        dateInputWrapper.style.display = (selectedValue === "future_work_order" || selectedValue === "follow_up") ? "block" : "none";
        yearlyOptions.style.display = (selectedValue === "yearly") ? "block" : "none"; // Show yearly options
    }

function addCustomerRequirement() {
        const customerSection = document.querySelector('.customer-section');
        const newCustomerSection = customerSection.cloneNode(true); // Clone the first customer section
        const customerCount = document.querySelectorAll('.customer-section').length + 1;

// Update the cloned section's headings and input names
        newCustomerSection.querySelector('h5').textContent = `Customer ${customerCount}`;
        newCustomerSection.querySelectorAll('select').forEach(select => {
            select.value = ''; // Reset selected values
            select.selectedIndex = 0; // Reset to default
        });
        newCustomerSection.querySelectorAll('textarea').forEach(textarea => {
            textarea.value = ''; // Reset textarea
        });
        newCustomerSection.querySelectorAll('.additionalOptions, .dateInputWrapper, .monthlyOptions, .yearlyOptions, #quartlyOptions, #halaflyOptions').forEach(div => {
            div.style.display = 'none'; // Hide additional options and date inputs
        });

document.getElementById('customerRequirements').appendChild(newCustomerSection); // Append new section
    }
</script>

/backup 3
<style>
    .offcanvas-end {
        background-color: #EAEDF4;
        width: 90%; /* Set a maximum width for the form */
    }
</style>

// Show or hide options based on the selected period type
        additionalOptions.style.display = "block"; // Show additional options dropdown
        monthlyOptions.style.display = "none"; // Hide monthly options
        dateInputWrapper.style.display = "none"; // Hide date input
        yearlyOptions.style.display = "none"; // Hide yearly options
        quartlyOptions.style.display = "none"; // Hide quarterly options
        halaflyOptions.style.display = "none"; // Hide half-yearly options

document.getElementById('customerRequirements').appendChild(newCustomerSection); // Append new section
    }
</script>

21st 
    <style>
    .offcanvas-end {
        background-color: #EAEDF4;
        width: 90%; /* Set a maximum width for the form */
    }
</style>

<div class="row" id="quartlyOptions" style="display: none;">
                            <div class="col-md-6">
                                <label for="monthInput3" class="form-label subtextstyle">Select Month (Quarterly)</label>
                                <select class="form-select" id="monthInput3" name="month_input_3">
                                    <option selected disabled>Select a Month</option>
                                    <option value="jan,feb,mar">Jan, Feb, Mar</option>
                                    <option value="apr,may,jun">Apr, May, Jun</option>
                                    <option value="jul,aug,sep">Jul, Aug, Sep</option>
                                    <option value="oct,nov,dec">Oct, Nov, Dec</option>
                                </select>
                                @error('month_input_3')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

<div class="row" id="halaflyOptions" style="display: none;">
                            <div class="col-md-6">
                                <label for="monthInput4" class="form-label subtextstyle">Select Half-Yearly Months</label>
                                <select class="form-select" id="monthInput4" name="month_input_4">
                                    <option selected disabled>Select a Month</option>
                                    <option value="jan,feb,mar,apr,may,jun">Jan, Feb, Mar, Apr, May, Jun</option>
                                    <option value="jul,aug,sep,oct,nov,dec">Jul, Aug, Sep, Oct, Nov, Dec</option>
                                </select>
                                @error('month_input_4')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

<div class="row yearlyOptions" style="display: none;" id="yearlyOptions">
                            <div class="col-md-12">
                                <label for="yearInput3" class="form-label subtextstyle">Select Year</label>
                                <select class="form-select" id="yearInput3" name="year_input_3">
                                    <option selected disabled>Select a Year</option>
                                    @php
                                        $currentYear = date('Y');
                                        $yearRanges = [];
                                        // Loop to get the previous 7 years and next 4 upcoming years
                                        for ($i = -7; $i < 4; $i++) {
                                            $startYear = $currentYear + $i;
                                            $endYear = $startYear + 1;
                                            $yearRanges[] = "$startYear-$endYear";
                                        }
                                        // Output the year ranges in the dropdown
                                        foreach ($yearRanges as $range) {
                                            echo "<option value='$range'>$range</option>";
                                        }
                                    @endphp
                                </select>
                                @error('year_input_3')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

// Reset all options
        additionalOptions.style.display = "none";
        monthlyOptions.style.display = "none";
        dateInputWrapper.style.display = "none";
        yearlyOptions.style.display = "none";
        quartlyOptions.style.display = "none";
        halaflyOptions.style.display = "none";

function checkAdditionalOption(selectElement) {
        const additionalOptionValue = selectElement.value;
        const customerSection = selectElement.closest('.customer-section');
        const dateInputWrapper = customerSection.querySelector(".dateInputWrapper");
        const yearlyOptions = customerSection.querySelector(".yearlyOptions");

// Show or hide the date input based on the selected additional option
        dateInputWrapper.style.display = (additionalOptionValue === 'future_work_order' || additionalOptionValue === 'follow_up') ? "block" : "none";

// Show or hide the yearly options based on the selected additional option
        yearlyOptions.style.display = (additionalOptionValue === 'yearly') ? "block" : "none";
    }

function addCustomerRequirement() {
        // Clone the customer section and reset inputs
        const customerSection = document.querySelector('.customer-section');
        const newCustomerSection = customerSection.cloneNode(true);
        const inputs = newCustomerSection.querySelectorAll('input, select, textarea');

// Reset inputs in the cloned section
        inputs.forEach(input => {
            input.value = '';
            input.selectedIndex = 0; // Reset select inputs
        });

// Append the new customer section
        document.getElementById('customerRequirements').appendChild(newCustomerSection);
    }
</script>

//27  working all features

<div class="col-md-7 additionalOptions" style="display: none;">
                            <label for="additionalInput" class="form-label subtextstyle">Options</label>
                            <select class="form-select" name="additional_option[]" onchange="checkAdditionalOption(this)">
                                <option selected disabled>Select an Option</option>
                                <option value="decision">Decision</option>
                                <option value="work_order_now">Work Order Now</option>
                                <option value="future_work_order">Future Work Order - Date Based</option>
                                <option value="follow_up">Follow Up - Date Based</option>
                            </select>
                            @error('additional_option.*')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

<div class="row yearlyRangeOptions" style="display: none;" id="yearlyRangeOptions">
                            <div class="col-md-12">
                                <label for="yearInput3" class="form-label subtextstyle">Select Year</label>
                                <select class="form-select" id="yearInput3" name="year_input_3">
                                    <option selected disabled>Select a Year</option>
                                    @php
                                        $currentYear = date('Y');
                                        $yearRanges = [];
                                        // Loop to get the previous 7 years and next 4 upcoming years
                                        for ($i = -7; $i < 4; $i++) {
                                            $startYear = $currentYear + $i;
                                            $endYear = $startYear + 1;
                                            $yearRanges[] = "$startYear-$endYear";
                                        }
                                        // Output the year ranges in the dropdown
                                        foreach ($yearRanges as $range) {
                                            echo "<option value='$range'>$range</option>";
                                        }
                                    @endphp
                                </select>
                                @error('year_input_3')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

<div class="mb-4">
                            <label for="remarks" class="form-label">Remarks</label>
                            <textarea class="form-control" name="remarks[]" rows="3"></textarea>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mt-3">
                                <button type="button" class="btn addbtnform w-80">
                                    + Add another purpose
                                </button>
                            </div>
                       </div>
                    </div>
                </div>
                
            </div>

// Reset all options
    additionalOptions.style.display = "none";
    monthlyOptions.style.display = "none";
    dateInputWrapper.style.display = "none";
    yearlyOptions.style.display = "none";
    quartlyOptions.style.display = "none";
    halaflyOptions.style.display = "none";
    yearlyRangeOptions.style.display = "none"; // Reset yearlyRangeOptions display

// Show options based on the selected period type
    if (periodType === '1') {
        additionalOptions.style.display = "block"; // Show additional options dropdown
        // Show only the "Decision" option
        const decisionOption = additionalOptions.querySelector('option[value="decision"]');
        if (decisionOption) decisionOption.selected = true; // Set default selection to "Decision"
    } else if (periodType === '2') {
        additionalOptions.style.display = "block"; // Show additional options dropdown
        // Show "Decision", "Month", and "Year"
        const decisionOption = additionalOptions.querySelector('option[value="decision"]');
        if (decisionOption) decisionOption.selected = true; // Set default selection to "Decision"
        monthlyOptions.style.display = "block"; // Show monthly options
        yearlyOptions.style.display = "block";
    } else if (periodType === '3') {
        additionalOptions.style.display = "block"; // Show additional options dropdown
        // Show "Decision", "Quarterly Month", and "Range of Year"
        const decisionOption = additionalOptions.querySelector('option[value="decision"]');
        if (decisionOption) decisionOption.selected = true; // Set default selection to "Decision"
        quartlyOptions.style.display = "block"; // Show quarterly options
        yearlyRangeOptions.style.display = "block"; // Show yearly range options
    }  else if (periodType === '4') {
        additionalOptions.style.display = "block"; // Show additional options dropdown
        // Show "Decision", "Quarterly Month", and "Range of Year"
        const decisionOption = additionalOptions.querySelector('option[value="decision"]');
        if (decisionOption) decisionOption.selected = true; // Set default selection to "Decision"
        halaflyOptions.style.display = "block"; // Show quarterly options
        yearlyRangeOptions.style.display = "block"; // Show yearly range options
    } else if (periodType === '5') {
        additionalOptions.style.display = "block"; // Show additional options dropdown
        // Show "Decision", "Quarterly Month", and "Range of Year"
        const decisionOption = additionalOptions.querySelector('option[value="decision"]');
        if (decisionOption) decisionOption.selected = true; // Set default selection to "Decision"
        yearlyRangeOptions.style.display = "block"; // Show yearly range options
    } else if (periodType === '6') {
        additionalOptions.style.display = "block"; // Show additional options dropdown
        // Show "Decision", "Quarterly Month", and "Range of Year"
        const decisionOption = additionalOptions.querySelector('option[value="decision"]');
        if (decisionOption) decisionOption.selected = true; // Set default selection to "Decision"
        yearlyRangeOptions.style.display = "block"; // Show yearly range options
    }
}

// Reset inputs in the cloned section
        inputs.forEach(input => {
            input.value = '';
            input.selectedIndex = 0; // Reset select inputs
        });

// Append the new customer section
        document.getElementById('customerRequirements').appendChild(newCustomerSection);
    }
</script>

//27 final update
<style>
    .offcanvas-end {
        background-color: #EAEDF4;
        width: 90%; /* Set a maximum width for the form */
    }
</style>

<div class="col-md-7 additionalOptions" style="display: none;">
                            <label for="additionalInput" class="form-label subtextstyle">Options</label>
                            <select class="form-select" name="additional_option[]" onchange="checkAdditionalOption(this)">
                                <option selected disabled>Select an Option</option>
                                <option value="decision">Decision</option>
                                <option value="work_order_now">Work Order Now</option>
                                <option value="future_work_order">Future Work Order - Date Based</option>
                                <option value="follow_up">Follow Up - Date Based</option>
                            </select>
                            @error('additional_option.*')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

<div class="row">
                            <div class="col-md-6 mt-3">
                            <button type="button" class="btn addbtnform w-80" onclick="addServiceSection(this)">
                                + Add another service
                                </button>
                            </div>
                       </div>
                    </div>
                </div>
                                    </div>
                                    </div>
                
            </div>

// Target specific option elements within the service section
    const additionalOptions = serviceSection.querySelector(".additionalOptions");
    const monthlyOptions = serviceSection.querySelector(".monthlyOptions");
    const dateInputWrapper = serviceSection.querySelector(".dateInputWrapper");
    const yearlyOptions = serviceSection.querySelector(".yearlyOptions");
    const quartlyOptions = serviceSection.querySelector("#quartlyOptions");
    const halaflyOptions = serviceSection.querySelector("#halaflyOptions");
    const yearlyRangeOptions = serviceSection.querySelector("#yearlyRangeOptions");

// Reset all options
    [additionalOptions, monthlyOptions, dateInputWrapper, yearlyOptions, quartlyOptions, halaflyOptions, yearlyRangeOptions].forEach(option => option.style.display = "none");

// Show relevant options based on period type
    if (periodType === '1') {
        additionalOptions.style.display = "block";
    } else if (periodType === '2') {
        additionalOptions.style.display = "block";
        monthlyOptions.style.display = "block";
        yearlyOptions.style.display = "block";
    } else if (periodType === '3') {
        additionalOptions.style.display = "block";
        quartlyOptions.style.display = "block";
        yearlyRangeOptions.style.display = "block";
    } else if (periodType === '4') {
        additionalOptions.style.display = "block";
        halaflyOptions.style.display = "block";
        yearlyRangeOptions.style.display = "block";
    } else if (periodType === '5' || periodType === '6') {
        additionalOptions.style.display = "block";
        yearlyRangeOptions.style.display = "block";
    }
}

// Helper function to reset options display
function resetOptions(options) {
    options.forEach(option => {
        if (option) option.style.display = "none";
    });
}

// Helper function to show additional options with default "Decision" selection
function showAdditionalOptions(additionalOptions, values) {
    if (additionalOptions) {
        additionalOptions.style.display = "block";
        const decisionOption = additionalOptions.querySelector('option[value="decision"]');
        if (decisionOption) decisionOption.selected = true;
    }
}

// Function to handle additional option selection and show date input if required
function checkAdditionalOption(selectElement) {
    const additionalOptionValue = selectElement.value;
    const customerSection = selectElement.closest('.customer-section');
    const dateInputWrapper = customerSection.querySelector(".dateInputWrapper");

dateInputWrapper.style.display = (additionalOptionValue === 'future_work_order' || additionalOptionValue === 'follow_up') ? "block" : "none";
}

// Function to clone customer requirements section
function addCustomerRequirement() {
    const customerSection = document.querySelector('.customer-section');
    const newCustomerSection = customerSection.cloneNode(true);
    
    // Reset inputs in the new section
    resetInputs(newCustomerSection);
    document.getElementById('customerRequirements').appendChild(newCustomerSection);
}

// Function to reset inputs in a cloned section
function resetInputs(section) {
    const selects = section.querySelectorAll('select');
    selects.forEach(select => {
        select.selectedIndex = 0; // Reset to default
        resetOptions([
            section.querySelector(".additionalOptions"),
            section.querySelector(".monthlyOptions"),
            section.querySelector(".dateInputWrapper"),
            section.querySelector(".yearlyOptions"),
            section.querySelector("#quartlyOptions"),
            section.querySelector("#halaflyOptions"),
            section.querySelector("#yearlyRangeOptions")
        ]);
    });
    const textareas = section.querySelectorAll('textarea');
    textareas.forEach(textarea => {
        textarea.value = ''; // Reset textarea values
    });
}

function addServiceSection(button) {
    const customerSection = button.closest('.customer-section');
    const serviceSection = customerSection.querySelector('.service-section');
    const newServiceSection = serviceSection.cloneNode(true);

// Clear inputs and reset select elements in the new service section
    const selects = newServiceSection.querySelectorAll('select');
    selects.forEach(select => select.selectedIndex = 0);
    const inputs = newServiceSection.querySelectorAll('input[type="date"], textarea');
    inputs.forEach(input => input.value = '');
    const optionsContainers = newServiceSection.querySelectorAll('.additionalOptions, .monthlyOptions, .dateInputWrapper, .yearlyOptions, #quartlyOptions, #halaflyOptions, #yearlyRangeOptions');
    optionsContainers.forEach(option => option.style.display = 'none');

// Insert the new service section after the current service section
    serviceSection.insertAdjacentElement("afterend", newServiceSection);
}

</script>

final final backup
<style>
    .offcanvas-end {
        background-color: #EAEDF4;
        width: 90%; /* Set a maximum width for the form */
    }
</style>

<div class="col-md-7 additionalOptions" style="display: none;">
                            <label for="additionalInput" class="form-label subtextstyle">Options</label>
                            <select class="form-select" name="additional_option[]" onchange="checkAdditionalOption(this)">
                                <option selected disabled>Select an Option</option>
                                <option value="decision">Decision</option>
                                <option value="work_order_now">Work Order Now</option>
                                <option value="future_work_order">Future Work Order - Date Based</option>
                                <option value="follow_up">Follow Up - Date Based</option>
                            </select>
                            @error('additional_option.*')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

<div class="row">
                            <div class="col-md-6 mt-3">
                            <button type="button" class="btn addbtnform w-80" onclick="addServiceSection(this)">
                                + Add another service
                                </button>
                                <button type="button" class="btn btn-danger w-20" onclick="removeServiceSection(this)">
                - Remove this service
            </button>
                            </div>
                       </div>
                    </div>
                </div>
                                    </div>
                                    </div>
                
            </div>

// Reset all options
    [additionalOptions, monthlyOptions, dateInputWrapper, yearlyOptions, quartlyOptions, halaflyOptions, yearlyRangeOptions].forEach(option => option.style.display = "none");

// Helper function to reset options display
function resetOptions(options) {
    options.forEach(option => {
        if (option) option.style.display = "none";
    });
}

// Function to handle additional option selection and show date input if required
function checkAdditionalOption(selectElement) {
    const additionalOptionValue = selectElement.value;
    const customerSection = selectElement.closest('.customer-section'); // Get the customer section
    const serviceSection = selectElement.closest('.service-section'); // Get the service section

// Target the date input wrapper in the customer section
    const dateInputWrapper = customerSection.querySelector(".dateInputWrapper"); 
    
    // Show or hide the date input wrapper based on the selected value
    dateInputWrapper.style.display = (additionalOptionValue === 'future_work_order' || additionalOptionValue === 'follow_up') ? "block" : "none";
}

// Clear inputs and reset select elements in the new service section
    const selects = newServiceSection.querySelectorAll('select');
    selects.forEach(select => {
        select.selectedIndex = 0; // Reset to default
        select.dispatchEvent(new Event('change')); // Trigger change event to show/hide options
    });
    
    const inputs = newServiceSection.querySelectorAll('input[type="date"], textarea');
    inputs.forEach(input => input.value = '');

// Hide all options initially
    const optionsContainers = newServiceSection.querySelectorAll('.additionalOptions, .monthlyOptions, .dateInputWrapper, .yearlyOptions, #quartlyOptions, #halaflyOptions, #yearlyRangeOptions');
    optionsContainers.forEach(option => option.style.display = 'none');

// Insert the new service section after the current service section
    serviceSection.insertAdjacentElement("afterend", newServiceSection);

// Add event listener to the relevant select element to handle additional option changes
    const additionalOptionsSelect = newServiceSection.querySelector('.additionalOptions select'); // Adjust selector as necessary
    if (additionalOptionsSelect) {
        additionalOptionsSelect.addEventListener('change', function() {
            checkAdditionalOption(this);
        });
    }
}
function removeServiceSection(button) {
    const serviceSection = button.closest('.service-section'); // Find the closest service section
    if (serviceSection) {
        serviceSection.remove(); // Remove the service section from the DOM
    }
}

</script>

now i want store this data 
customer_details 
store

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateVisitorsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('visitors', function (Blueprint $table) {
            $table->id();
            $table->tinyInteger('enquiry_type'); // 1 for call incoming, 2 for call ongoing, etc.
            $table->string('visitor_name')->nullable();
            $table->string('visitor_type')->nullable();
            $table->string('visitor_email')->nullable();
            $table->string('visitor_phone_number')->nullable();
            $table->uuid('assessee_type')->nullable();
            $table->uuid('branch')->nullable()
            $table->text('notification_template')->nullable();

//customer details
            $table->uuid('customer_id')->nullable();
            $table->enum('customer_status', [1, 2, 3,4,5,6,7])->default(1); 
            $table->uuid('service_id')->nullable();
            $table->tinyInteger('additional_options');
            $table->date('date_input_wrapper')->nullable();
            $table->text('quartly_months')->nullable();
            $table->text('half_yearly_months')->nullable();
            $table->text('monthly_months')->nullable();
            $table->string('yearly_options')->nullable();
            $table->string('yearly_range_options')->nullable();
            $table->text('remarks')->nullable();
            $table->timestamps();
        });
    }

/**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('visitors');
    }
}

// Reset all options
    [additionalOptions, monthlyOptions, dateInputWrapper, yearlyOptions, quartlyOptions, halaflyOptions, yearlyRangeOptions].forEach(option => option.style.display = "none");

// Helper function to reset options display
function resetOptions(options) {
    options.forEach(option => {
        if (option) option.style.display = "none";
    });
}

// Function to handle additional option selection and show date input if required
function checkAdditionalOption(selectElement) {
    const additionalOptionValue = selectElement.value;
    const customerSection = selectElement.closest('.customer-section'); // Get the customer section
    const serviceSection = selectElement.closest('.service-section'); // Get the service section

// Insert the new service section after the current service section
    serviceSection.insertAdjacentElement("afterend", newServiceSection);

// Add event listener to the relevant select element to handle additional option changes
    const additionalOptionsSelect = newServiceSection.querySelector('.additionalOptions select'); // Adjust selector as necessary
    if (additionalOptionsSelect) {
        additionalOptionsSelect.addEventListener('change', function() {
             
        });
    }
}
function removeServiceSection(button) {
    const serviceSection = button.closest('.service-section'); // Find the closest service section
    if (serviceSection) {
        serviceSection.remove(); // Remove the service section from the DOM
    }
}

</script>

<div class="row ">
            <h2 class="mb-4 mt-3 fontstyle">Visitor details</h2>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label for="visitorName" class="form-label subtextstyle">Visitor Name</label>
                        <input type="text" class="form-control" id="visitorName" placeholder="Enter Here">
                    </div>
                
                </div>
                <div class="col-md-4">
                <div class="mb-3">
                        <label for="visitorEmail" class="form-label subtextstyle">Visitor Type</label>
                        <input type="email" class="form-control" id="visitorEmail" placeholder="Enter Here">
                    </div>
                </div>
                <div class="col-md-4">
                <div class="mb-3">
                        <label for="visitorEmail" class="form-label subtextstyle">Visitor Email</label>
                        <input type="email" class="form-control" id="visitorEmail" placeholder="Enter Here">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-3">
                    <label for="visitorEmail" class="form-label subtextstyle">Visitor Phone number</label>
                    <input type="email" class="form-control" id="visitorEmail" placeholder="Enter Here">
                    </div>
                   
                </div>
                <div class="col-md-3">
                    <div class="mb-3">
                        <label for="assignee" class="form-label subtextstyle">Assignee</label>
                        <select class="form-select" id="assignee">
                            <option selected>Select</option>
                            <option value="1">Assignee 1</option>
                            <option value="2">Assignee 2</option>
                        </select>
                    </div>
                    
                </div>
                <div class="col-md-3">
                    <div class="mb-3">
                        <label for="assignee" class="form-label subtextstyle">Branch</label>
                        <select class="form-select" id="assignee">
                            <option selected>Select</option>
                            <option value="1">Assignee 1</option>
                            <option value="2">Assignee 2</option>
                        </select>
                    </div>
                    
                </div>
            
                <div class="col-md-3">
                    <div class="mb-3">
                        <label for="assignee" class="form-label subtextstyle">Notification template</label>
                        <select class="form-select" id="assignee">
                            <option selected>Select</option>
                            <option value="1">Assignee 1</option>
                            <option value="2">Assignee 2</option>
                        </select>
                    </div>
                    
                </div>
            </div>

<div id="customerRequirements">
                
                <div class="customer-section mb-4 p-3 mt-3" style="background-color: #D6DBE9; border-radius: 10px">
                    <h5 class="fontstyle">Customer 1</h5>
                    <div class="row mb-3 d-flex justify-content-between">
                    <div class="col-md">
                        <div class="custom-checkbox-group">
                            
                            <label class="custom-checkbox">
                            <input type="checkbox" class="checkbox-input">
                            <span class="checkbox-icon"></span>
                            </label>
                            <label class="form-check-label subtextstyle" value="1" for="workStatus1">New Work</label>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="custom-checkbox-group">
                            
                            <label class="custom-checkbox">
                            <input type="checkbox" class="checkbox-input">
                            <span class="checkbox-icon"></span>
                            </label>
                            <label class="form-check-label subtextstyle" value="2" for="workStatus1">Work Status</label>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="custom-checkbox-group">
                            
                            <label class="custom-checkbox">
                            <input type="checkbox" class="checkbox-input">
                            <span class="checkbox-icon"></span>
                            </label>
                            <label class="form-check-label subtextstyle" value="3" for="workStatus1">Info Submit</label>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="custom-checkbox-group">
                            
                            <label class="custom-checkbox">
                            <input type="checkbox" class="checkbox-input">
                            <span class="checkbox-icon"></span>
                            </label>
                            <label class="form-check-label subtextstyle" value = "4" for="workStatus1">Money Paying</label>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="custom-checkbox-group">
                            
                            <label class="custom-checkbox">
                            <input type="checkbox" class="checkbox-input">
                            <span class="checkbox-icon"></span>
                            </label>
                            <label class="form-check-label subtextstyle" value="5" for="workStatus1">Discuss Works</label>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="custom-checkbox-group">
                            
                            <label class="custom-checkbox">
                            <input type="checkbox" class="checkbox-input">
                            <span class="checkbox-icon"></span>
                            </label>
                            <label class="form-check-label subtextstyle" value = "6" for=="workStatus1">Delivery</label>
                        </div>
                    </div>
                    <div class="col-md">
                        <div class="custom-checkbox-group">
                            
                            <label class="custom-checkbox">
                            <input type="checkbox" class="checkbox-input">
                            <span class="checkbox-icon"></span>
                            </label>
                            <label class="form-check-label subtextstyle" value="7" for="workStatus1">Others</label>
                        </div>
                    </div>
                    
                    
                
                </div>
                <div class="row mb-3">
                    <select class="form-select" id="customerSelect" name="customer_id">
                        <option selected disabled>Select a Customer</option>
                        
                    </select>
                </div>

<div class="row mb-3">
                    <div class="row mb-3 service-section">
                    <div class="service-section">
            <div class="row mb-3">
                <div class="col-md-7">
                        <h5 class="fontstyle">Service 1</h5>
                            <select class="form-select" name="service_id[]" onchange="checkPeriodType(this)">
                                <option selected disabled>Select a Service</option>
                                @foreach($services as $service)
                                    <option value="{{ $service->id }}" data-period-type="{{ $service->period_type }}">
                                        {{ $service->service_name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('service_id.*')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

<div class="col-md-7 additionalOptions" style="display: none;">
                            <label for="additionalInput" class="form-label subtextstyle">Options</label>
                            <select class="form-select" name="additional_option[]" onchange="checkAdditionalOption(this)">
                                <option selected disabled>Select an Option</option>
                                <option value="1">Decision</option>
                                <option value="2">Work Order Now</option>
                                <option value="3">Future Work Order - Date Based</option>
                                <option value="4">Follow Up - Date Based</option>
                            </select>
                            @error('additional_option.*')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

<div class="row mt-3 mb-3 d-flex justify-content-end">
                <div class="col-md-2">
                    <button type="reset" class="btn addbtnstyle2 w-100 mt-3">Cancel</button>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn addbtnstyle1 w-100 mt-3">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
   $(document).ready(function() {
    $.ajax({
        url: "{{ route('admin.dropdowns') }}", // Update to your actual route for fetching customers
        type: "GET",
        dataType: "json",
        success: function(response) {
            let customerSelect = $('#customerSelect');
            customerSelect.empty(); // Clear existing options
            customerSelect.append('<option selected disabled>Select a Customer</option>');
            response.customers.forEach(function(customer) {
                customerSelect.append(`<option value="${customer.id}">${customer.user_name}</option>`);
            });
        },
        error: function(xhr) {
            console.error("Error loading customers:", xhr.responseText);
        }
    });
});

</script>
<script>
$(document).ready(function() {
    $('#visitorForm').on('submit', function(event) {
        event.preventDefault(); // Prevent the default form submission

// Gather form data
        var formData = $(this).serialize();

// AJAX call
        $.ajax({
            type: 'POST',
            url: '/your-endpoint-url', // Replace with your actual endpoint URL
            data: formData,
            success: function(response) {
                // Handle the successful response here
                alert('Visitor added successfully!');
                // Optionally, reset the form or close the offcanvas
                $('#visitorForm')[0].reset(); // Reset the form
                $('#addVisitorForm').offcanvas('hide'); // Close the offcanvas
            },
            error: function(xhr) {
                // Handle any errors
                alert('An error occurred: ' + xhr.responseText);
            }
        });
    });
});
</script>

dashboard.php 
@extends('layouts.admin')
@section('content')
<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NS Tax Consultancy Dashboard</title>
    
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="../../admin/css/custom.css">
</head>
<body>

<div class="container">
        
        @include('admin.commonComponents.menuHeader')

<div class="row d-flex justify-content-between dashboard-stats mt-6  " >
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3  h-100 paddingstyle"  >
                <div class="card">
                    <h5 class="card-title">0</h5>
                    <p class="card-text">No. of Branchses</p>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3  h-100 paddingstyle" >
                <div class="card">
                    <h5 class="card-title">0</h5>
                    <p class="card-text">No. of Enquiries</p>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3  h-100 paddingstyle" >
                <div class="card">
                    <h5 class="card-title">0</h5>
                    <p class="card-text">No. of Visitors</p>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3  h-100 paddingstyle" >
                <div class="card">
                    <h5 class="card-title">0</h5>
                    <p class="card-text">No. of Customers</p>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3  h-100 paddingstyle" >
                <div class="card">
                    <h5 class="card-title">0</h5>
                    <p class="card-text">No. of Mediators</p>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3  h-100 paddingstylelast" >
                <div class="card">
                    <h5 class="card-title">0</h5>
                    <p class="card-text">No. of Employees</p>
                </div>
            </div>
        </div>

<div class="container my-2 pl-0 pr-0">
            <div class="nav-section d-flex">
                <div class=" nav-item active">WAITING FOR ME (10)</div>
                <div class=" nav-item">MY WORK</div>
                <div class=" nav-item">PENDING FOR ASSIGN (10)</div>
                <div class=" nav-item">FOLLOW UP CANCEL (5)</div>
                <div class=" nav-item">MY DOUBTS (2)</div>
                <div class=" nav-item">EMPLOYEE DOUBTS (10)</div>
                <div class=" nav-item">MY REQUIRED INFORMATION</div>
            </div>
        </div>

<div class="container my-3">
            <div class="row justify-content-start">
                <div class="col-auto pl-0 pr-0">
                    <div class="filter-option p-2 d-flex justify-content-between align-items-center">
                        <span class="me-2 fontstyle">Filter by</span>
                        <div class="dropdown d-inline">
                            <button class="btn btn-light dropdown-toggle" type="button" id="dropdownFilter" data-bs-toggle="dropdown" aria-expanded="false">
                                Choose Service
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownFilter">
                                <li><a class="dropdown-item" href="#">Service 1</a></li>
                                <li><a class="dropdown-item" href="#">Service 2</a></li>
                                <li><a class="dropdown-item" href="#">Service 3</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

<div class="col-auto">
                    <div class="sort-option p-2 d-flex justify-content-between align-items-center">
                        <span class="me-2 fontstyle">Sort by</span>
                        <div class="dropdown d-inline">
                            <button class="btn btn-light dropdown-toggle" type="button" id="dropdownSort" data-bs-toggle="dropdown" aria-expanded="false">
                                Select
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownSort">
                                <li><a class="dropdown-item" href="#">Option 1</a></li>
                                <li><a class="dropdown-item" href="#">Option 2</a></li>
                                <li><a class="dropdown-item" href="#">Option 3</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    
        <div class="table-scroll-wrapper">
            <div class="table-responsive">
                <table class="table table-striped custom-table">
                <thead>
                        <tr>
                            <th>Visitor ID</th>
                            <th>Visitor Name</th>
                            <th>Customer Name</th>
                            <th>Phone</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Visitor Name</td>
                            <td>Customer Name</td>
                            <td>123-456-7890</td>
                            <td class="action-btns">
                                <button class="btn  btn-sm viewstyle">View</button>
                                <button class="btn  btn-sm deletestyle">Delete</button>
                            </td>
                        </tr>
                        
                    </tbody>
                </table>
            </div>
        </div>
        
    </div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#example').DataTable({
                "paging": true,
                "searching": true,
                "info": true,
                "lengthChange": true,
                "pageLength": 10,
                "language": {
                    "lengthMenu": "Show _MENU_ entries"
                }
            });
        });
    </script>
</body>
</html>

@endsection

add blade removieng 
 
<style>
.offcanvas-end {
    background-color: #EAEDF4;
    width: 90%; /* Set a maximum width for the form */
}
</style>

<div class="row">
            <h2 class="mb-4 mt-3 fontstyle">Visitor Details</h2>
            <div class="col-md-4">
                <div class="mb-3">
                    <label for="visitorName" class="form-label subtextstyle">Visitor Name</label>
                    <input type="text" class="form-control" id="visitorName" name="visitor_name" placeholder="Enter Name" required>
                </div>
            </div>
            <div class="col-md-4">
                <div class="mb-3">
                    <label for="visitorType" class="form-label subtextstyle">Visitor Type</label>
                    <input type="text" class="form-control" id="visitorType" name="visitor_type" placeholder="Enter Visitor Type" required>
                </div>
            </div>
            <div class="col-md-4">
                <div class="mb-3">
                    <label for="visitorEmail" class="form-label subtextstyle">Visitor Email</label>
                    <input type="email" class="form-control" id="visitorEmail" name="visitor_email" placeholder="Enter Email" required>
                </div>
            </div>
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="visitorPhone" class="form-label subtextstyle">Visitor Phone Number</label>
                    <input type="tel" class="form-control" id="visitorPhone" name="visitor_phone_number" placeholder="Enter Phone Number" required>
                </div>
            </div>
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="assignee" class="form-label subtextstyle">Assignee</label>
                    <select class="form-select" id="assignee" name="assessee_type" >
                        <option selected disabled>Select Assignee</option>
                        <option value="1">Assignee 1</option>
                        <option value="2">Assignee 2</option>
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="branch" class="form-label subtextstyle">Branch</label>
                    <select class="form-select" name="branch" required>
                        <option selected disabled>Select Branch</option>
                        <option value="1">Branch 1</option>
                        <option value="2">Branch 2</option>
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="notificationTemplate" class="form-label subtextstyle">Notification Template</label>
                    <select class="form-select" id="notificationTemplate" name="notification_template" required>
                        <option selected disabled>Select Template</option>
                        <option value="1">Template 1</option>
                        <option value="2">Template 2</option>
                    </select>
                </div>
            </div>
        </div>

<div id="customerRequirements">
            
            @include('admin.visitor.additonaldetails')

</div>

<div class="row">
            <div class="col-md-6 mt-3">
                <button type="button" class="btn addbtnform w-80" onclick="addCustomerRequirement()">
                    + Add another Customer requirement
                </button>
            </div>
        </div>

<div class="row mt-3 mb-3 d-flex justify-content-end">
            <div class="col-md-2">
                <button type="reset" class="btn addbtnstyle2 w-100 mt-3">Cancel</button>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn addbtnstyle1 w-100 mt-3">Save</button>
            </div>
        </div>
    </form>
</div>
</div>
<script>
let customerList = []
$(document).ready(function() {
    $.ajax({
        url: "{{ route('admin.dropdowns') }}",
        type: "GET",
        dataType: "json",
        success: function(response) {
            let customerSelect = $('#customerSelect');
            customerSelect.empty(); // Clear existing options
            customerSelect.append('<option selected disabled>Select a Customer</option>');
            response.customers.forEach(function(customer) {
                customerSelect.append(`<option value="${customer.id}">${customer.user_name}</option>`); // Use UUID
                customerList.push(`<option value="${customer.id}">${customer.user_name}</option>`)
            });
        },
        error: function(xhr) {
            console.error("Error loading customers:", xhr.responseText);
        }
    });
});
$(document).ready(function () {
$('#visitorForm').on('submit', function (e) {
    e.preventDefault();

// Collect form data
    let formData = $(this).serializeArray();
    let customerDetails = []; // Array to store each customer's details separately

// Loop through each customer section to gather customer data
    $('.customer-section').each(function () {
        let customerData = {
            customer_id: $(this).find('select[name="customer_id"]').val(),
            service_id: $(this).find('select[name="service_id[]"]').map(function () {
                return $(this).val(); // Collect selected service IDs
            }).get().filter(Boolean), // Filter out any empty values
            additional_option: $(this).find('select[name="additional_option[]"]').map(function () {
                return $(this).val(); // Collect additional options
            }).get().filter(Boolean),
            workStatus: $(this).find('input[type="checkbox"]:checked').map(function () {
                return $(this).val(); // Collect the value of checked checkboxes
            }).get().filter(Boolean),
            yearly_input: $(this).find('select[name="yearly_input[]"]').map(function () {
              return $(this).val(); // Collect yearly inputs
                }).get().filter(Boolean),

month_input_3: $(this).find('select[name="month_input_3[]"]').map(function () {
                return $(this).val(); // Collect date inputs
            }).get().filter(Boolean), // Ensure no empty dates are sent

month_input_4: $(this).find('select[name="month_input_4[]"]').map(function () {
                return $(this).val(); // Collect date inputs
            }).get().filter(Boolean), // Ensure no empty dates are sent

month_input: $(this).find('select[name="month_input[]"]').map(function () {
                return $(this).val(); // Collect date inputs
            }).get().filter(Boolean), // Ensure no empty dates are sent
            year_input_3: $(this).find('select[name="year_input_3[]"]').map(function () {
                return $(this).val(); // Collect date inputs
            }).get().filter(Boolean), // Ensure no empty dates are sent
          
            date_input: $(this).find('input[name="date_input[]"]').map(function () {
                return $(this).val(); // Collect date inputs
            }).get().filter(Boolean), // Ensure no empty dates are sent
        
            remarks: $(this).find('textarea[name="remarks[]"]').map(function () {
                return $(this).val(); // Collect date inputs
            }).get().filter(Boolean), // Ensure no empty dates are sent
          
        };
        customerDetails.push(customerData); // Add each customerData object to customerDetails array
    });

// Add customer details to form data as a JSON string
    formData.push({ name: 'customer_details', value: JSON.stringify(customerDetails) });
    console.log(formData); // For testing, to check the output format

// AJAX call
    $.ajax({
        url: '{{ route('visitors.store') }}',
        method: 'POST',
        data: formData,
        success: function (response) {
            alert(response.message); // Show success message
            // Optionally reset the form or close the offcanvas
            $('#visitorForm')[0].reset();
            $('#customerRequirements').empty(); 
        },
        error: function (xhr) {
            // Handle validation errors
            if (xhr.responseJSON.errors) {
                let errors = xhr.responseJSON.errors;
                // Display errors
                for (const key in errors) {
                    alert(errors[key][0]); // Simple alert for error messages
                }
            }
        }
    });
});
});

// Function to handle period type selection and show relevant options
function checkPeriodType(selectElement) {
const selectedOption = selectElement.options[selectElement.selectedIndex];
const periodType = selectedOption.getAttribute("data-period-type");
const serviceSection = selectElement.closest('.service-section');

// Target specific option elements within the service section
const additionalOptions = serviceSection.querySelector(".additionalOptions");
const monthlyOptions = serviceSection.querySelector(".monthlyOptions");
const dateInputWrapper = serviceSection.querySelector(".dateInputWrapper");
const yearlyOptions = serviceSection.querySelector(".yearlyOptions");
const quartlyOptions = serviceSection.querySelector("#quartlyOptions");
const halaflyOptions = serviceSection.querySelector("#halaflyOptions");
const yearlyRangeOptions = serviceSection.querySelector("#yearlyRangeOptions");

// Reset all options
[additionalOptions, monthlyOptions, dateInputWrapper, yearlyOptions, quartlyOptions, halaflyOptions, yearlyRangeOptions].forEach(option => option.style.display = "none");

// Show relevant options based on period type
if (periodType === '1') {
    additionalOptions.style.display = "block";
} else if (periodType === '2') {
    additionalOptions.style.display = "block";
    monthlyOptions.style.display = "block";
    yearlyOptions.style.display = "block";
} else if (periodType === '3') {
    additionalOptions.style.display = "block";
    quartlyOptions.style.display = "block";
    yearlyRangeOptions.style.display = "block";
} else if (periodType === '4') {
    additionalOptions.style.display = "block";
    halaflyOptions.style.display = "block";
    yearlyRangeOptions.style.display = "block";
} else if (periodType === '5' || periodType === '6') {
    additionalOptions.style.display = "block";
    yearlyRangeOptions.style.display = "block";
}
}

// Helper function to reset options display
function resetOptions(options) {
options.forEach(option => {
    if (option) option.style.display = "none";
});
}

// Helper function to show additional options with default "Decision" selection
function showAdditionalOptions(additionalOptions, values) {
if (additionalOptions) {
    additionalOptions.style.display = "block";
    const decisionOption = additionalOptions.querySelector('option[value="decision"]');
    if (decisionOption) decisionOption.selected = true;
}
}

// Function to handle additional option selection and show date input if required
function checkAdditionalOption(selectElement) {
const additionalOptionValue = selectElement.value;
const customerSection = selectElement.closest('.customer-section'); // Get the customer section
const serviceSection = selectElement.closest('.service-section'); // Get the service section

// Target the date input wrapper in the customer section
const dateInputWrapper = customerSection.querySelector(".dateInputWrapper");

// Show or hide the date input wrapper based on the selected value
dateInputWrapper.style.display = (additionalOptionValue === 'future_work_order' || additionalOptionValue === 'follow_up') ? "block" : "none";
}

// Function to clone customer requirements section
// function addCustomerRequirement() {
//     const customerSection = document.querySelector('.customer-section');
//     const newCustomerSection = customerSection.cloneNode(true);

//     // Reset inputs in the new section
//     resetInputs(newCustomerSection);
//     document.getElementById('customerRequirements').appendChild(newCustomerSection);
// }
const newCustomerSectionHTML = `@include('admin.visitor.additonaldetails')`;
function addCustomerRequirement() {
const container = document.createElement('div');
container.innerHTML = newCustomerSectionHTML;

// Select all customerSelect elements in the container
const customerSelectElements = container.querySelectorAll("#customerSelect");

// Iterate over customerSelect elements and customerList
customerSelectElements.forEach((customerSelectElement) => {
    // Iterate over the customerList to append all options to each select
    customerList.forEach((option) => {
        let optionNode;

// Check if the item in customerList is a string (HTML), and create a Node
        if (typeof option === 'string') {
            optionNode = document.createElement('option');
            optionNode.innerHTML = option; // Set the option text
        } else if (option instanceof Node) {
            // If it's already a Node (DOM element), use it directly
            optionNode = option;
        } else {
            console.error("Item in customerList is neither a valid string nor a valid Node:", option);
            return; // Skip if invalid item
        }

// Append the created or existing option to the select element
        customerSelectElement.appendChild(optionNode);
    });
});

// Append the container with updated select options to the parent container
document.getElementById('customerRequirements').appendChild(container);
}

// Function to reset inputs in a cloned section
function resetInputs(section) {
const selects = section.querySelectorAll('select');
selects.forEach(select => {
    select.selectedIndex = 0; // Reset to default
    resetOptions([
        section.querySelector(".additionalOptions"),
        section.querySelector(".monthlyOptions"),
        section.querySelector(".dateInputWrapper"),
        section.querySelector(".yearlyOptions"),
        section.querySelector("#quartlyOptions"),
        section.querySelector("#halaflyOptions"),
        section.querySelector("#yearlyRangeOptions")
    ]);
});
const textareas = section.querySelectorAll('textarea');
textareas.forEach(textarea => {
    textarea.value = ''; // Reset textarea values
});
}

function addServiceSection(button) {
const customerSection = button.closest('.customer-section');
const serviceSection = customerSection.querySelector('.service-section');
const newServiceSection = serviceSection.cloneNode(true);

const inputs = newServiceSection.querySelectorAll('input[type="date"], textarea');
inputs.forEach(input => input.value = '');

// Hide all options initially
const optionsContainers = newServiceSection.querySelectorAll('.additionalOptions, .monthlyOptions, .dateInputWrapper, .yearlyOptions, #quartlyOptions, #halaflyOptions, #yearlyRangeOptions');
optionsContainers.forEach(option => option.style.display = 'none');

// Insert the new service section after the current service section
serviceSection.insertAdjacentElement("afterend", newServiceSection);

// Add event listener to the relevant select element to handle additional option changes
const additionalOptionsSelect = newServiceSection.querySelector('.additionalOptions select'); // Adjust selector as necessary
if (additionalOptionsSelect) {
    additionalOptionsSelect.addEventListener('change', function() {
        checkAdditionalOption(this);
    });
}
}
function removeServiceSection(button) {
const serviceSection = button.closest('.service-section'); // Find the closest service section
if (serviceSection) {
    serviceSection.remove(); // Remove the service section from the DOM
}
}

</script>

<div class="mb-3">
                <label for="enquiryType" class="form-label subtextstyle">Enquiry Type</label>
                <div class="d-flex flex-direction-row align-items-center gap-2">
                    <div class="custom-radio-group">
                        <label class="custom-radio">
                        <input type="radio" name="radio" id="outgoing" class="radio-input">
                        <span class="radio-icon" ></span>
                        </label>
                        <label for="outgoing" class="subtextstyle">Outgoing</label>
                    </div>
                    <div class="custom-radio-group">
                        <label class="custom-radio">
                        <input type="radio" name="radio" id="incoming" class="radio-input">
                        <span class="radio-icon" ></span>
                        </label>
                        <label for="outgoing" class="subtextstyle">Incoming</label>
                    </div>  
                    <div class="custom-radio-group">
                        <label class="custom-radio">
                        <input type="radio" name="radio" id="visitorDirect"  class="radio-input">
                        <span class="radio-icon" ></span>
                        </label>
                        <label for="outgoing" class="subtextstyle">Visitor Direct</label>
                    </div>  
                    <div class="custom-radio-group">
                        <label class="custom-radio">
                        <input type="radio" name="radio" id="email" class="radio-input">
                        <span class="radio-icon" ></span>
                        </label>
                        <label for="outgoing" class="subtextstyle">Email</label>
                    </div>  
                    <div class="custom-radio-group">
                        <label class="custom-radio">
                        <input type="radio" name="radio" id="whatsapp" class="radio-input">
                        <span class="radio-icon" ></span>
                        </label>
                        <label for="outgoing" class="subtextstyle">WhatsApp</label>
                    </div>                    
                </div>
            </div>

break;
            case "4":
                halaflyOptions.style.display = "block"; // Show halafly options
                yearOptions.style.display = "block"; // Show year options for AY

public function getWaitingForme()
    {
        $user = Auth::user();
        $menuItems = $this->menuService->getMenuItems();
        $requirements = Visitor::select('id', 'visitor_name', 'visitor_phone_number') 
            ->with([
                'customerRequirements' => function($query) {
                    $query->select('id', 'visitor_id', 'customer_id');
                },
                'customerRequirements.serviceRequirements' => function($query) {
                    $query->select('id', 'customer_id', 'service_id');
                },
                'customerRequirements.serviceRequirements.serviceList' => function($query) {
                    $query->select('id', 'service_name');
                },
                'customerRequirements.customer' => function($query) {
                    $query->select('id', 'user_name');
                }
            ])->get();

// Return the data to the view
        return view('admin.dashboard.dashboard', compact('user', 'menuItems', 'requirements'));
    }

<div id="waitingforme" class="section-content">
    <div class="table-scroll-wrapper">
        <div class="table-responsive">
            <table class="table table-striped custom-table">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Visitor ID</th>
                        <th>Visitor Name</th>
                        <th>Customer Name</th>
                        <th>Phone</th>
                        <th>Service Name</th>
                    </tr>
                </thead>
                <tbody id="waitingforme-data">
                    
                </tbody>
            </table>
        </div>
    </div>
    @include('admin.commonComponents.datatable')
</div>

// Loop through the response data and append rows to the table
                    $.each(data, function(index, requirement) {
                        var row = `
                            <tr>
                                <td>${(page - 1) * entriesPerPage + (index + 1)}</td>
                                <td>${requirement.visitor_id}</td>
                                <td>${requirement.visitor_name}</td>
                                <td>${requirement.customer_name}</td>
                                <td>${requirement.visitor_phone_number}</td>
                                <td>${requirement.service_names}</td>
                            </tr>
                        `;
                        tableBody.append(row);
                    });

// Update pagination
                    updatePagination(recordsTotal, page);  // Update pagination UI
                },
                error: function(xhr, status, error) {
                    console.error('Error loading data:', error);
                }
            });
        }
        // Initial data fetch on page load
        fetchWaitingForMeData();

});
</script>

@php
                $groupedMenuItems = [];
                foreach ($menuItems as $menuItem) {
                    $groupedMenuItems[$menuItem['position_number']][] = $menuItem;
                }
            @endphp

@foreach ($groupedMenuItems as $position => $items)
                <div class="sb-sidenav-menu-heading" onclick="toggleSubmenu(this)">
                    <span class="submenu-text">
                        @switch($position)
                            @case(1) Work @break
                            @case(2) Manage @break
                            @case(3) Create @break
                            @case(4) Add @break
                            @case(5) Content Management @break
                        @endswitch
                    </span>
                    <i class="arrow fas fa-chevron-down"></i>
                </div>

<div class="submenu show">
                    @foreach ($items as $menuItem)
                        <a class="nav-link dashboardlink" href="{{ $menuItem['route'] }}">
                            <div class="sb-nav-link-icon ">
                                @if($menuItem['icon_path'])
                                    <img class="image-style" src="{{ $menuItem['icon_path'] }}" alt="{{ $menuItem['side_nav_name'] }} Icon">
                                @else
                                    <i class="{{ $menuItem['nav_icons'] }}"></i>
                                @endif
                            </div>
                            <span class="side-nav-name">{{ $menuItem['side_nav_name'] }}</span>
                        </a>
                    @endforeach
                </div>

<hr style="margin: 0px 15px">
            @endforeach

<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                @csrf
            </form>
            <div class="submenu show">
                <a class="nav-link" href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                    <div class="sb-nav-link-icon"><i class="fas fa-sign-out-alt"></i></div>
                    <span>Logout</span>
                </a>
            </div>
        </div>
    </div>
</nav>

menuItems.forEach(item => {
        const menuText = item.textContent.toLowerCase();
        const menuLink = item.closest('.nav-link');

if (menuText.includes(query)) {
            menuLink.classList.remove('d-none'); // Show matching items
        } else {
            menuLink.classList.add('d-none'); // Hide non-matching items
        }
    });
}

document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('.nav-link.dashboardlink');
    const searchInput = document.getElementById('menuSearch');

links.forEach(link => {
        link.addEventListener('click', function() {
            // Clear the search input
            searchInput.value = '';

// Reset visibility for all menu items
            document.querySelectorAll('.nav-link').forEach(menuLink => {
                menuLink.classList.remove('d-none');
            });

// Highlight the active link as before
            links.forEach(link => link.classList.remove('active'));
            this.classList.add('active');

// Store active link in local storage
            localStorage.setItem('activeLink', this.getAttribute('href'));
        });
    });
});

</script>

.nav-link:hover .image-style,
    .nav-link.active .image-style {
        filter: brightness(0) invert(1); /* This will turn the image to white on hover */
    }
    .nav-link.dashboardlink {
    display: flex;
    align-items: center;
}
.image-style {
    width: 24px; /* Adjust size as needed */
    margin-right: 8px;
}
.side-nav-name {
    white-space: nowrap;
}

</style>

@extends('layouts.admin')

@section('content')
<div class="container">
    @include('admin.commonComponents.menuHeader')

<div class="d-flex justify-content-between align-items-center">
        <h5 class="headingstyle">Payment Card Details</h5>
        <button type="button" class="btn addbtnstyle" onclick="addPaymentCardRow()">Add Payment Card</button>
    </div>

<div class="table-wrapper">
    <div class="table-responsive">
    <table  class="table table-bordered custom-table input-width">
                <thead>
                    <tr>
                        <th>Payment Name</th>
                        <th>Description</th>
                        <th>Order Type</th>
                        <th>Link</th>
                        <th>Your UPI ID</th>
                        <th>Your Bank Name</th>
                        <th>Account No</th>
                        <th>IFSC Code</th>
                        <th>Account Holder Name</th>
                        <th>Image Upload</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="paymentCardBody">
                    @foreach($paymentCards as $paymentCard)
                        @if(is_array($paymentCard->payment_details) && !empty($paymentCard->payment_details))
                            @foreach($paymentCard->payment_details as $detail)
                                <tr data-index="{{ $loop->index }}">
                                    <td><input type="text" class="form-control" name="payment_cards[{{ $loop->index }}][payment_name]" value="{{ $detail['payment_name'] ?? '' }}" placeholder="Payment Name"></td>
                                    <td><input type="text" class="form-control" name="payment_cards[{{ $loop->index }}][description]" value="{{ $detail['description'] ?? '' }}" placeholder="Description"></td>
                                    <td><input type="text" class="form-control" name="payment_cards[{{ $loop->index }}][order_type]" value="{{ $detail['order_type'] ?? '' }}" placeholder="Order Type"></td>
                                    <td><input type="text" class="form-control" name="payment_cards[{{ $loop->index }}][link]" value="{{ $detail['link'] ?? '' }}" placeholder="Link"></td>
                                    <td><input type="text" class="form-control" name="payment_cards[{{ $loop->index }}][upi_id]" value="{{ $detail['upi_id'] ?? '' }}" placeholder="Your UPI ID"></td>
                                    <td><input type="text" class="form-control" name="payment_cards[{{ $loop->index }}][bank_name]" value="{{ $detail['bank_name'] ?? '' }}" placeholder="Your Bank Name"></td>
                                    <td><input type="text" class="form-control" name="payment_cards[{{ $loop->index }}][account_no]" value="{{ $detail['account_no'] ?? '' }}" placeholder="Account No"></td>
                                    <td><input type="text" class="form-control" name="payment_cards[{{ $loop->index }}][ifsc]" value="{{ $detail['ifsc'] ?? '' }}" placeholder="IFSC Code"></td>
                                    <td><input type="text" class="form-control" name="payment_cards[{{ $loop->index }}][account_holder]" value="{{ $detail['account_holder'] ?? '' }}" placeholder="Account Holder Name"></td>
                                    <td><input type="file" class="form-control" name="payment_cards[{{ $loop->index }}][image_upload]"  placeholder="Image Uploadss"></td>

<td>
                                        <select class="form-control" name="payment_cards[{{ $loop->index }}][status]">
                                            <option value="0" {{ ($detail['status'] ?? 0) == 0 ? 'selected' : '' }}>Active</option>
                                            <option value="1" {{ ($detail['status'] ?? 0) == 1 ? 'selected' : '' }}>Inactive</option>
                                        </select>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm deletestyle" onclick="removePaymentCardRow(this, {{ $loop->index }})">Remove</button>
                                    </td>
                                </tr>
                            @endforeach
                        @endif
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

<button type="button" class="btn addbtnstyle mt-3" onclick="savePaymentCards()">Save Payment Cards</button>
</div>

const newRow = document.createElement('tr');
        newRow.innerHTML = `
            <td><input type="text" class="form-control" name="payment_cards[${nextIndex}][payment_name]" placeholder="Payment Name"></td>
            <td><input type="text" class="form-control" name="payment_cards[${nextIndex}][description]" placeholder="Description"></td>
            <td><input type="text" class="form-control" name="payment_cards[${nextIndex}][order_type]" placeholder="Order Type"></td>
            <td><input type="text" class="form-control" name="payment_cards[${nextIndex}][link]" placeholder="Link"></td>
            <td><input type="text" class="form-control" name="payment_cards[${nextIndex}][upi_id]" placeholder="Your UPI ID"></td>
            <td><input type="text" class="form-control" name="payment_cards[${nextIndex}][bank_name]" placeholder="Your Bank Name"></td>
            <td><input type="text" class="form-control" name="payment_cards[${nextIndex}][account_no]" placeholder="Account No"></td>
            <td><input type="text" class="form-control" name="payment_cards[${nextIndex}][ifsc]" placeholder="IFSC Code"></td>
            <td><input type="text" class="form-control" name="payment_cards[${nextIndex}][account_holder]" placeholder="Account Holder Name"></td>
            <td><input type="file" class="form-control" name="payment_cards[${nextIndex}][image_upload]" placeholder="Image Upload"></td>

<td>
                <select class="form-control" name="payment_cards[${nextIndex}][status]">
                    <option value="0">Active</option>
                    <option value="1">Inactive</option>
                </select>
            </td>
            <td>
                <button type="button" class="btn btn-sm deletestyle" onclick="removePaymentCardRow(this, ${nextIndex})">Remove</button>
            </td>
        `;
        tableBody.appendChild(newRow); 
        paymentCardDetails.push({}); 
    }

function removePaymentCardRow(button, rowIndex) {
        const tableBody = document.getElementById('paymentCardBody');
        button.closest('tr').remove(); 
        paymentCardDetails.splice(rowIndex, 1);

// Prepare a FormData object for file uploads
    const formData = new FormData();

rows.forEach((row, index) => {
        // Query the input elements
        const payment_name = row.querySelector(`input[name="payment_cards[${index}][payment_name]"]`);
        const description = row.querySelector(`input[name="payment_cards[${index}][description]"]`);
        const order_type = row.querySelector(`input[name="payment_cards[${index}][order_type]"]`);
        const link = row.querySelector(`input[name="payment_cards[${index}][link]"]`);
        const upi_id = row.querySelector(`input[name="payment_cards[${index}][upi_id]"]`);
        const bank_name = row.querySelector(`input[name="payment_cards[${index}][bank_name]"]`);
        const account_no = row.querySelector(`input[name="payment_cards[${index}][account_no]"]`);
        const ifsc = row.querySelector(`input[name="payment_cards[${index}][ifsc]"]`);
        const account_holder = row.querySelector(`input[name="payment_cards[${index}][account_holder]"]`);
        const image_upload = row.querySelector(`input[name="payment_cards[${index}][image_upload]"]`).files[0]; // Get the file object
        console.log(image_upload,"sfsdf");
        const status = row.querySelector(`select[name="payment_cards[${index}][status]"]`);

// If an image is uploaded, append it to FormData
        if (image_upload) {
            formData.append(`payment_cards[${index}][image_upload]`, image_upload);
        }

// Push the card details to the array, including the image URL or empty string if no file
        if (payment_name && description && order_type && link && upi_id && bank_name && account_no && ifsc && account_holder && status) {
            paymentCardDetails.push({
                payment_name: payment_name.value.trim() || '',
                description: description.value.trim() || '',
                order_type: order_type.value.trim() || '',
                link: link.value.trim() || '',
                upi_id: upi_id.value.trim() || '',
                bank_name: bank_name.value.trim() || '',
                account_no: account_no.value.trim() || '',
                ifsc: ifsc.value.trim() || '',
                account_holder: account_holder.value.trim() || '',
                image_upload: image_upload ? image_upload.name : '', // Extract the filename, not the full path
                status: status.value || '0'
            });
        }
    });

}
function savePaymentCards() {
    // Update the paymentCardDetails array with the current form values
    updatePaymentCardsFromForm();

const formData = new FormData();
    // Append the payment card data to the form as a JSON string
    formData.append('payment_cards', JSON.stringify(paymentCardDetails));

// Send the updated data to the backend using AJAX
    fetch('{{ route('paymentCards.store') }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('Payment cards saved successfully!');
            // Optionally, reload or update the page if needed
        } else {
            alert('Error saving payment cards: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while saving payment cards.');
    });
}

</script>
@endsection

<div class="offcanvas offcanvas-end customerCompilance" tabindex="-1" id="customerCompilanceForm" aria-labelledby="customerCompilanceFormLabel">
<div class="offcanvas-header">
    <h5 id="customerCompilanceFormLabel" class="addButtonStyle">Customer Compliance Form</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
    <form id="dynamicForm">
        <div class="row">
            <div class="col-sm">
            <div class="mb-3">
                <label for="customer_name" class="form-label subtextstyle">Customer Name</label>
                <select class="form-control" id="customer_name" name="customer_name" required>
                    <option value="" disabled selected>Select Customer</option>
                </select>
            </div>
            </div>
            <div class="col-sm-auto d-flex align-items-end">
                <div class="mb-3 w-100">
                    <button type="button" class="btn addbtnform w-100" id="addNewCustomerButton">
                        + Add New Customer
                    </button>
                </div>
            </div>
            <div class="col-sm">
                <div class="mb-3">
                    <label for="customer_id" class="form-label subtextstyle">Customer Id</label>
                    <input type="text" class="form-control" id="customer_id" name="customer_id" placeholder="Enter here" required readonly>
                </div>
            </div>
            <div class="col-sm">
                <div class="mb-3">
                    <label for="visitor_id" class="form-label subtextstyle">Visitor Id</label>
                    <input type="tel" class="form-control" id="visitor_id" name="visitor_id" placeholder="Enter here" required readonly>
                </div>
            </div>
            <div class="col-sm">
                <div class="mb-3">
                    <label for="work_id" class="form-label subtextstyle">Work Id</label>
                    <input type="tel" class="form-control" id="work_id" name="work_id" placeholder="Enter here" required readonly>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm">
                <div class="mb-3">
                    <label for="reference" class="form-label subtextstyle">Reference</label>
                    <input type="text" class="form-control" id="customer_reference" name="customer_reference" placeholder="Enter here" required readonly>
                </div>
            </div>
            <div class="col-sm">
                <div class="mb-3">
                    <label for="phon_number" class="form-label subtextstyle">Phone Number</label>
                    <input type="text" class="form-control" id="phon_number" name="phon_number" placeholder="Enter here" required readonly>
                </div>
            </div>
            <div class="col-sm">
                <div class="mb-3">
                    <label for="email_address" class="form-label subtextstyle">Email address</label>
                    <input type="tel" class="form-control" id="email_address" name="email_address" placeholder="Enter here" required readonly>
                </div>
            </div>
            
        </div>

<table id="compilanceListUser" class="table table-bordered custom-table custom-appliance-table">
            <thead style="background-color:white">
                <tr>
                    <th>Service</th>
                    <th>Applicability</th>
                    <th>No. of Days for Reg.</th>
                    <th>Price</th>
                    <th>Comments</th>
                    <th>Status</th>
                    <th>Decision</th>
                </tr>
            </thead>
            <tbody id="compilanceListUserBody">
                
            </tbody>
        </table>
        <hr class="dashed-hr-compaliance m-0 mt-5 mb-2">
        <div class="col-md-12 mb-3 row justify-content-between align-items-center">
            <p class="mb-0 col-6" style="font-weight: bold; color: #333;">Total</p>
            <div class="ms-auto col-4">
                <label for="totalprice" class="form-label">Price</label>
                <input type="text" class="form-control placeholderStyle no-focus-style w-100" name="totalprice" placeholder="Enter here" id="totalprice" style="border-top-right-radius: 10px; border-bottom-right-radius: 10px;" readonly="">
            </div>
        </div>
        <hr class="dashed-hr-compaliance m-0 mb-2">
        <div class="col-md-12 mb-3 row justify-content-between align-items-center">
            <div class="ms-auto col-4">
                    <label for="nature_of_business" class="form-label">Nature of Business</label>
                    <input type="text" class="form-control placeholderStyle no-focus-style w-100" name="nature_of_business" placeholder="Enter here" id="totalprice" style="border-top-right-radius: 10px; border-bottom-right-radius: 10px;" readonly="">
                </div>
                <div class="ms-auto col-4">
                    <label for="constitution" class="form-label">Constitution</label>
                    <input type="text" class="form-control placeholderStyle no-focus-style w-100" name="constitution" placeholder="Enter here" id="totalprice" style="border-top-right-radius: 10px; border-bottom-right-radius: 10px;" readonly="">
                </div>               
                <div class="ms-auto col-4">
                    <label for="turn_over" class="form-label">Turnover</label>
                    <input type="text" class="form-control placeholderStyle no-focus-style w-100" name="turn_over" placeholder="Enter here" id="turn_over" style="border-top-right-radius: 10px; border-bottom-right-radius: 10px;" readonly="">
             </div>
            </div>
        <hr class="dashed-hr-compaliance m-0 mb-2">

<div class="col-md-12 mb-3 row justify-content-between align-items-center">
            <div class="ms-auto col-3">
                    <label for="prepared_by" class="form-label">Prepared By</label>
                    <input type="text" class="form-control placeholderStyle no-focus-style w-100" name="prepared_by" placeholder="Enter here" id="totalprice" style="border-top-right-radius: 10px; border-bottom-right-radius: 10px;" readonly="">
                </div>
                <div class="ms-auto col-3">
                    <label for="verification_by" class="form-label">Verification By</label>
                    <input type="text" class="form-control placeholderStyle no-focus-style w-100" name="verification_by" placeholder="Enter here" id="verification_by" style="border-top-right-radius: 10px; border-bottom-right-radius: 10px;" readonly="">
                </div>               
                <div class="ms-auto col-3">
                    <label for="authorized_by" class="form-label">Authorized By</label>
                    <input type="text" class="form-control placeholderStyle no-focus-style w-100" name="authorized_by" placeholder="Enter here" id="authorized_by" style="border-top-right-radius: 10px; border-bottom-right-radius: 10px;" readonly="">
                </div>
                <div class="ms-auto col-3">
                    <label for="filed_by" class="form-label">Filed By</label>
                    <input type="text" class="form-control placeholderStyle no-focus-style w-100" name="filed_by" placeholder="Enter here" id="filed_by" style="border-top-right-radius: 10px; border-bottom-right-radius: 10px;" readonly="">
                </div>
            </div>
            <div class="d-flex justify-content-end mt-2 gap-2">
            <div class=" text-center">
                <button type="cancel" class="btn  cancelbtnstyle">Cancel</button>
            </div>
            <div class=" text-center">
            <button type="submit" class="btn  savebtnstyle">Save</button>
            </div>
        </div>
    </form>
    
</div>
</div>
<script>
$(document).ready(function () {
function fetchUsers() {
    const searchQuery = $('#customerSearch').val();
    $.ajax({
        url: '/admin/share/getusers', 
        type: 'GET',
        data: { search: searchQuery }, 
        dataType: 'json',
        success: function (response) {
            if (response.users && response.users.length > 0) {
                let customerDropdown = $('#customer_name');
                customerDropdown.empty(); 
                customerDropdown.append('<option value="" disabled selected>Select Customer</option>'); 
                response.users.forEach(user => {
                    customerDropdown.append(
                        `<option value="${user.id}">${user.user_name} (${user.contact_number})</option>`
                    );
                });
            } else {
                alert('No users found.');
            }
        },
        error: function (xhr) {
            console.error('Error fetching users:', xhr);
            alert('An error occurred while fetching customers.');
        }
    });
}
fetchUsers();
});

</script>

</div>

<div class="col-md-3 mb-3">
                            <label for="no_of_days" class="form-label">No. of Days for Reg.(Approx)</label>
                            <input type="number" class="form-control" name="no_of_days[]" placeholder="Enter number of days" required>
                        </div>

<div class="col-md-3 mb-3">
                            <label for="price" class="form-label">Price</label>
                            <input type="number" class="form-control" name="price[]" placeholder="Enter price" required>
                        </div>

<div class="col-md-3 mb-3">
                            <label for="comments" class="form-label">Compulsory/optional</label>
                            <div class="d-flex">
                                <input type="text" class="form-control" name="comments[]" placeholder="Enter comments" required>
                                <button type="button" class="btn btn-danger deletestyle remove-input me-2" onclick="removeInput(this)">-</button>
                            </div>
                        </div>
                    </div>
                @else
                    
                    @foreach ($configurations as $configuration)
                    <div class="input-row col-md-12 mb-3 d-flex flex-wrap" data-id="{{ $configuration->id }}">
                        <div class="col-md-3 mb-3">
                            <label for="service_name" class="form-label">Service</label>
                            <select class="form-select" name="service_id[]" required>
                                @foreach ($services as $service)
                                    <option value="{{ $service->id }}" 
                                            {{ (isset($configuration) && $configuration->service_id == $service->id) || old('service_id') == $service->id ? 'selected' : '' }}>
                                        {{ $service->service_name }}
                                    </option>
                                @endforeach
                            </select>

</div>

<div class="col-md-3 mb-3">
                            <label for="no_of_days" class="form-label">No. of Days for Reg.(Approx)</label>
                            <input type="number" class="form-control" name="no_of_days[]" value="{{ old('no_of_days[]', $configuration->no_of_days) }}" placeholder="Enter number of days" required>
                        </div>

<div class="col-md-3 mb-3">
                            <label for="price" class="form-label">Price</label>
                            <input type="number" class="form-control" name="price[]" value="{{ old('price[]', $configuration->price) }}" placeholder="Enter price" required>
                        </div>

<div class="col-md-3 mb-3">
                            <label for="comments" class="form-label">Compulsory/optional</label>
                            <div class="d-flex">
                                <input type="text" class="form-control" name="comments[]" value="{{ old('comments[]', $configuration->comments) }}" placeholder="Enter comments" required>
                                <button type="button" class="btn btn-danger deletestyle remove-input me-2" onclick="removeInput(this)">-</button>
                            </div>
                        </div>
                    </div>
                    @endforeach
                @endif
            </div>

<div class="d-flex justify-content-center mt-4 gap-2">
                <div class="text-center">
                    <button type="button" class="btn cancelbtnstyle" data-bs-dismiss="offcanvas">Cancel</button>
                </div>
                <div class="text-center">
                    <button type="submit" class="btn savebtnstyle">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>

fetch(`/get-configurations/${categoryId}`)
            .then(response => response.json())
            .then(data => {
                const inputContainer = document.getElementById('inputContainer');
                inputContainer.innerHTML = ''; // Clear existing rows

if (data.configurations.length > 0) {
                    data.configurations.forEach(config => {
                        const newRow = `
                            <div class="input-row col-md-12 mb-3 d-flex flex-wrap" data-id="${config.id}">
                                <div class="col-md-3 mb-3">
                                    <label for="service_name" class="form-label">Service</label>
                                   <select class="form-select" name="service_id[]" required>
                                      @foreach ($services as $service)
                                       <option value="{{ $service->id }}" 
                                            {{ (isset($configuration) && $configuration->service_id == $service->id) || old('service_id') == $service->id ? 'selected' : '' }}>
                                            {{ $service->service_name }}
                                        </option>
                                      @endforeach
                                  </select>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label for="no_of_days" class="form-label">No. of Days for Reg.(Approx)</label>
                                    <input type="number" class="form-control" name="no_of_days[]" value="${config.no_of_days}" placeholder="Enter number of days" required>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label for="price" class="form-label">Price</label>
                                    <input type="number" class="form-control" name="price[]" value="${config.price}" placeholder="Enter price" required>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label for="comments" class="form-label">Compulsory/optional</label>
                                    <div class="d-flex">
                                        <input type="text" class="form-control" name="comments[]" value="${config.comments}" placeholder="Enter comments" required>
                                    @isset($configuration)
                                        <button type="button" class="btn btn-danger deletestyle remove-input me-2" 
                                            data-id="{{ $configuration->id }}" onclick="removeInput(this)">-</button>
                                    @endisset

</div>
                                </div>
                            </div>
                        `;
                        inputContainer.insertAdjacentHTML('beforeend', newRow);
                    });
                } else {
                    // If no configurations, show the default empty input row
                    document.getElementById('addButton').click();
                }
            })
            .catch(error => console.error('Error fetching configurations:', error));
    }

</script>

<div class="offcanvas offcanvas-end" tabindex="-1" id="editGroupForm" aria-labelledby="editGroupFormLabel">
    <div class="offcanvas-header">
        <h5 id="editGroupFormLabel" class="addButtonStyle">Edit Group</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <form id="editGroupFormAction" action="#" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT') 
            <div class="row">
                <div class="col-md-12 mb-3">
                    <label for="editGroupName" class="form-label">Group Name</label>
                    <input type="text" class="form-control placeholderStyle no-focus-style" placeholder="Enter here" name="group_name" id="editGroupName" required>
                </div>

<div class="col-md-6 mb-3">
                    <label for="editCustomerOwnerName" class="form-label">Group Owner Name</label>
                    <select class="form-control placeholderStyle no-focus-style" id="editCustomerOwnerName" name="group_owner_id" required>
                        <option value="" disabled selected>Select Group Owner</option>
                    </select>
                </div>

<div class="col-md-6 mb-3">
                    <label for="editCustomerId" class="form-label">Customer ID</label>
                    <input type="text" class="form-control placeholderStyle no-focus-style" name="customer_id" placeholder="Enter here" id="editCustomerId" required>
                </div>

<div class="offcanvas-header">
                    <h5 id="editGroupFormLabel" class="addButtonStyle">Members</h5>
                </div>

<div class="col-md-3 mb-3">
                    <button type="button" class="btn addbtnform w-100" id="editAddNewMemberButton">
                        + Add Member
                    </button>
                </div>

</div>

<div class="d-flex justify-content-center mt-2 gap-2">
                <div class="text-center">
                    <button type="button" class="btn cancelbtnstyle" data-bs-dismiss="offcanvas">Cancel</button>
                </div>
                <div class="text-center">
                    <button type="submit" class="btn savebtnstyle">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>

// Fetch the users data dynamically from the server
        function fetchUsersData() {
            return fetch('/admin/share/getusers', {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                usersData = data.users;
                populateRelationDropdowns();
                // Dynamically pre-select the group owner based on server data or user selection
                const preSelectedGroupOwnerId = getPreSelectedGroupOwnerId(); // Implement this function as needed
                preSelectGroupOwner(preSelectedGroupOwnerId); // Dynamically pre-select the group owner
            })
            .catch(error => console.error('Error fetching users:', error));
        }

// Populate the Group Owner dropdown and Relation Customer dropdowns
        function populateRelationDropdowns() {
            if (usersData.length === 0) {
                console.log("No user data available.");
                return;
            }

// Populate Group Owner Dropdown
            const groupOwnerDropdown = document.getElementById('editCustomerOwnerName');
            const selectedGroupOwner = groupOwnerDropdown.value;
            groupOwnerDropdown.innerHTML = '<option value="" selected>Select Group Owner</option>';
            usersData.forEach(user => {
                const option = document.createElement('option');
                option.value = user.id;
                option.textContent = user.user_name;
                if (user.id === selectedGroupOwner) {
                    option.selected = true;
                }
                groupOwnerDropdown.appendChild(option);
            });

// Populate Relation Customer Dropdowns for Existing Members
            const relationCustomerDropdowns = document.querySelectorAll('[id^="realtion_customer_id_"]');
            relationCustomerDropdowns.forEach(function (dropdown) {
                const selectedCustomer = dropdown.value;
                dropdown.innerHTML = '<option value="" disabled selected>Select Customer</option>';
                usersData.forEach(user => {
                    const option = document.createElement('option');
                    option.value = user.id;
                    option.textContent = user.user_name;
                    if (user.id === selectedCustomer) {
                        option.selected = true;
                    }
                    dropdown.appendChild(option);
                });
            });
        }

// Pre-select the dropdown based on the provided groupOwnerId
        function preSelectGroupOwner(groupOwnerId) {
            const dropdown = document.getElementById('editCustomerOwnerName');
            if (!dropdown) return;

const option = dropdown.querySelector(`option[value="${groupOwnerId}"]`);
            if (option) {
                dropdown.value = groupOwnerId;
            }
        }

// Get the pre-selected group owner ID dynamically (this can be fetched from the server or other sources)
        function getPreSelectedGroupOwnerId() {
            // For example, you could fetch it from an existing user session or a hidden input field
            const preSelectedGroupOwnerId = document.getElementById('preSelectedGroupOwnerId').value; 
            return preSelectedGroupOwnerId || ''; // Default to empty if no value is found
        }

// Fetch customer details when a Group Owner is selected
        const groupOwnerDropdown = document.getElementById('editCustomerOwnerName');
        const customerIdInput = document.getElementById('editCustomerId');
        groupOwnerDropdown.addEventListener('change', function () {
            const selectedUserId = groupOwnerDropdown.value;

if (selectedUserId) {
                fetch(`/admin/getCustomer/${selectedUserId}`, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(user => {
                    customerIdInput.value = user?.generated_id || '';
                })
                .catch(error => console.error('Error fetching customer details for group owner:', error));
            } else {
                customerIdInput.value = '';
            }
        });

// Add new member and populate the customer dropdown
        document.getElementById('editAddNewMemberButton').addEventListener('click', function () {
            const memberCount = document.querySelectorAll('.memberFields').length + 1;

const newMemberDiv = document.createElement('div');
            newMemberDiv.classList.add('memberFields');
            newMemberDiv.setAttribute('data-member-id', memberCount);

newMemberDiv.innerHTML = `
                <div class="row">
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="realtion_customer_id_${memberCount}" class="form-label subtextstyle">Name</label>
                            <select class="form-control" id="realtion_customer_id_${memberCount}" name="realtion_customer_id[]" required>
                                <option value="" disabled selected>Select Customer</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="realtion_generted_id_${memberCount}" class="form-label subtextstyle">Customer ID</label>
                            <input type="text" class="form-control" id="realtion_generted_id_${memberCount}" name="realtion_generted_id[]" placeholder="Enter here" required>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="relation_name" class="form-label">Relation</label>
                        <input type="text" class="form-control placeholderStyle no-focus-style" placeholder="Enter here" name="relation_name[]" id="relation_name">
                    </div>
                    <div class="col-md-4 d-flex align-items-end"></div>
                </div>
            `;

document.getElementById('editRelationMembers').appendChild(newMemberDiv);

// Populate the dropdown with user data
            const newMemberDropdown = newMemberDiv.querySelector(`#realtion_customer_id_${memberCount}`);
            newMemberDropdown.innerHTML = '<option value="" disabled selected>Select Customer</option>';
            usersData.forEach(user => {
                const option = document.createElement('option');
                option.value = user.id;
                option.textContent = user.user_name;
                newMemberDropdown.appendChild(option);
            });
        });

// Fetch customer details when a customer is selected in the relation dropdown
        document.addEventListener('change', function (event) {
            if (event.target.matches('[id^="realtion_customer_id_"]')) {
                const selectedUserId = event.target.value;
                const memberId = event.target.closest('.memberFields').getAttribute('data-member-id');
                const generatedIdInput = document.getElementById(`realtion_generted_id_${memberId}`);

if (selectedUserId) {
                    fetch(`/admin/getCustomer/${selectedUserId}`, {
                        method: 'GET',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.json())
                    .then(user => {
                        generatedIdInput.value = user?.generated_id || '';
                    })
                    .catch(error => console.error('Error fetching customer details for relation:', error));
                } else {
                    generatedIdInput.value = '';
                }
            }
        });

// Fetch users data when the page loads
        fetchUsersData();
    });
</script>

@extends('layouts.admin')

@section('content')
<div class="container mt-4">
    @include('admin.commonComponents.menuHeader')

<div class="table-header d-flex justify-content-between align-items-center mb-3">
        
        <div class="col-md-6 mb-0">
            <div class="dropdown">
                <input type="search" class="form-control placeholderStyle" placeholder="Search Parent Topic" id="search_help_topic_parents" onkeyup="filterParentTopicsList()" aria-label="Search Parent Topic" onclick="showParentDropdownList()" style="cursor: pointer;">
                <div id="dropdownParentGetTopics" class="dropdown-get-options" style="display: none; position: absolute; z-index: 10; background: #fff; border: 1px solid #ccc; max-height: 200px; overflow-y: auto;">
                    
                </div>
                <input type="hidden" name="root_parent_id[]" id="selectedParentGetTopicId">
            </div>
        </div>
        <button id="btnAddTopic" class="btn viewstyle" data-bs-toggle="offcanvas" data-bs-target="#addHelpTopicForm">+ Add Topic</button>
        <button id="btnEditTopic" class="btn editstyle" data-bs-toggle="offcanvas" onclick="openEditTopicForm()" data-bs-target="#editHelpTopicForm" style="display: none;">+ Edit Topic</button>
        <button 
            id="btnDeleteTopic" 
            class="btn deletestyle" 
            style="display: none;" 
            onclick="deleteHelpTopic(document.getElementById('selectedParentGetTopicId').value)">
            + Delete Topic
        </button>
        <button 
            id="btnAddQuestion" 
            class="btn viewstyle" 
            data-bs-toggle="offcanvas" 
            data-bs-target="#addHelpTopicQuestionForm" 
            style="display: none;" 
            onclick="addHelpTopicQuestion(document.getElementById('selectedParentGetTopicId').value)">
            + Add Question
        </button>
    </div>

<div class="table-wrapper">
        <div class="table-responsive">
            <table id="helpTopicsTable" class="table table-bordered custom-table">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Title</th>
                        <th>Root Parent</th>
                        <th>Immediate Parent</th>
                        <th>Parent Count</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="helpTopicsTableBody">
                    
                </tbody>
            </table>
        </div>
    </div>

@include('admin.commonComponents.datatable')
</div>

@include('admin.helpTopics.add')
@include('admin.helpTopics.edit')
@include('admin.helpTopics.helpTopicQuestions.add')

function filterParentTopicsList() {
    const query = document.getElementById('search_help_topic_parents').value.toLowerCase();
    const dropdown = document.getElementById('dropdownParentGetTopics');
    const items = dropdown.getElementsByClassName('dropdown-item');

Array.from(items).forEach(item => {
        const text = item.textContent.toLowerCase();
        item.style.display = text.includes(query) ? 'block' : 'none';
    });
}

function selectParentTopicList(title, id) {
    const searchInput = document.getElementById('search_help_topic_parents');
    const hiddenInput = document.getElementById('selectedParentGetTopicId');
    searchInput.value = title;
    hiddenInput.value = id;

const dropdown = document.getElementById('dropdownParentGetTopics');
    dropdown.style.display = 'none';

// Show or hide buttons based on selection
    const btnEditTopic = document.getElementById('btnEditTopic');
    const btnDeleteTopic = document.getElementById('btnDeleteTopic');
    const btnAddQuestion = document.getElementById('btnAddQuestion');

if (id === 1) { // Root selected
        btnEditTopic.style.display = 'none';
        btnDeleteTopic.style.display = 'none';
        btnAddQuestion.style.display = 'none';
    } else { // Other topic selected
        btnEditTopic.style.display = 'inline-block';
        btnDeleteTopic.style.display = 'inline-block';
        btnAddQuestion.style.display = 'inline-block';
    }
}
  function deleteHelpTopic(id) {
        const deleteUrl = '/admin/helptopic/' + id;
        confirmDelete(deleteUrl, 'helptopicTable');
    }
// Function to open the Edit Topic form and populate data
function openEditTopicForm() {
    const topicId = document.getElementById('selectedParentGetTopicId').value;
    
    console.log("Topic ID:", topicId);

if (topicId && topicId !== "1") {
        console.log("Fetching details for topic ID:", topicId);

fetch(`/admin/getTopicDetails/${topicId}`, {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                console.log("Topic details:", data.topic);

// Check if elements exist before setting their values
                const topicTitleElement = document.getElementById('edit_help_topic_title');
                const topicIdElement = document.getElementById('editTopicId');
                const topicStatusElement = document.getElementById('edit_help_topic_status');
                const parentIdElement = document.getElementById('selectedParentGetTopicId');
                const parentTitleElement = document.getElementById('search_help_topic_parent_id');

if (topicTitleElement && topicIdElement && topicStatusElement && parentIdElement && parentTitleElement) {
                    topicTitleElement.value = data.topic.title;
                    topicIdElement.value = data.topic.id;
                    topicStatusElement.value = data.topic.status;
                    parentIdElement.value = data.topic.immediate_parent_id;
                    parentTitleElement.value = data.topic.parent_title || 'No Parent';
                } else {
                    console.error("One or more elements are missing in the DOM.");
                }
            } else {
                alert('Failed to fetch topic details.');
            }
        })
        .catch(error => {
            console.error('Error fetching topic details:', error);
            alert('An error occurred while fetching topic details.');
        });
    } else {
        alert('Invalid topic ID.');
    }
}

// Ensure the dropdown is populated correctly when the page loads
document.addEventListener('DOMContentLoaded', function () {
    const dropdown = document.getElementById('dropdownParentGetTopics');
    const searchInput = document.getElementById('search_help_topic_parents');
    const hiddenInput = document.getElementById('selectedParentGetTopicId');
    
    // Set default selection to "Root"
    searchInput.value = 'Root';
    hiddenInput.value = 1;

// Add the "Root" option as the first static option
    dropdown.innerHTML = `
        <div class="dropdown-item" data-value="1" onclick="selectParentTopicList('Root', 1)">Root</div>
    `;

// Fetch and append dynamic options for the dropdown
    fetch('/admin/getHelpTopics', {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.data && data.data.length > 0) {
            data.data.forEach(topic => {
                const item = document.createElement('div');
                item.className = 'dropdown-item';
                item.setAttribute('data-value', topic.id);
                item.textContent = topic.title;
                item.onclick = () => selectParentTopicList(topic.title, topic.id);
                dropdown.appendChild(item);
            });
        } else {
            const noOption = document.createElement('div');
            noOption.className = 'dropdown-item';
            noOption.textContent = 'No Topics Found';
            dropdown.appendChild(noOption);
        }
    })
    .catch(error => {
        console.error('Error fetching help topics:', error);
    });
});

</script>

@endsection