@extends("layouts.main")

@section("content")
<style>
    body {
        font-family: 'Montserrat', sans-serif;
        color: #252869;
    }

    .container {
        max-width: 500px;
        margin: auto;
        padding: 20px;
        background-color: white;
        border-radius: 0.5rem;
    }

    h1, button, input, label {
        font-family: 'Montserrat', sans-serif;
    }

    h1, .headline {
        color: #252869;
        font-weight: 900;
    }

    /* Primary Button with Gradient */
    button.primary {
        background: linear-gradient(53.81deg, #28A9AB -31.23%, #B4E495 77.79%);
        padding: 10px;
        font-weight: 900;
        transition: background-color 0.3s ease-in-out;
        border: none; /* Remove border */
        color: #252869;
    }

    button.primary:hover {
        background: linear-gradient(53.81deg, #B4E495 -31.23%, #28A9AB 77.79%);
        font-weight:900;
    }

    /* Secondary Button with Dark Purple-Blue */
    button {
        background-color: #252869;
        color: white;
        padding: 10px;
        font-weight: 600;
        transition: all 0.3s ease-in-out;
        border: none; /* Remove border */
    }

    button:hover {
        background-color: #1b1f58; /* Slightly darker shade for hover effect */
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    input[type="text"], input[name^="question_"] {
        border: 1px solid #CCC;
        padding: 10px;
        border-radius: 0.5rem;
        width: calc(100% - 24px); /* Adjust width to account for padding and border */
        transition: all 0.3s ease;
    }

    input[type="text"]:focus, input[name^="question_"]:focus {
        border-color: #28A9AB;
        box-shadow: 0 0 0 2px rgba(40, 169, 171, 0.2);
        outline: none;
    }

    textarea {
        border: 1px solid #CCC;
        padding: 10px;
        border-radius: 0.5rem;
        width: calc(100% - 24px); /* Adjust width to account for padding and border */
        resize: vertical;
        transition: all 0.3s ease;
    }

    textarea:focus {
        border-color: #28A9AB;
        box-shadow: 0 0 0 2px rgba(40, 169, 171, 0.2);
        outline: none;
    }

    .section {
        margin-bottom: 20px;
        padding: 20px;
        border: 1px solid #CCC;
        border-radius: 0.5rem;
        transition: all 0.3s ease;
    }
    
    .section:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    .questionContainer {
        margin-top: 20px;
    }
    
    .question-card {
        transition: all 0.3s ease;
    }

    label {
        margin-left: 10px;
        font-weight: 600;
    }

    .language-flags {
        display: flex;
        align-items: center;
    }
    .flag-container {
        transition: all 0.2s ease;
        border: 3px solid transparent; /* Increased border width */
        border-radius: 4px;
        padding: 0; /* Removed padding to eliminate white space */
        cursor: pointer;
    }
    .flag-icon {
        width: 40px;
        height: 30px; /* Fixed height for all flags */
        border-radius: 2px; /* Slightly reduced to avoid overlap with container border */
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        object-fit: cover; /* Ensures the image covers the area without distortion */
        filter: grayscale(80%) opacity(0.7); /* Make unselected flags almost grayscale but still recognizable */
        transition: all 0.3s ease;
        display: block; /* Ensures no extra space */
    }
    .flag-container.selected .flag-icon {
        filter: grayscale(0%) opacity(1); /* Full color for selected flag */
    }
    .flag-container.selected {
        border-color: #28A9AB;
        background-color: rgba(40, 169, 171, 0.1);
        transform: scale(1.05);
    }
    .flag-container:hover {
        transform: scale(1.05);
    }
    .flag-container:hover .flag-icon {
        filter: grayscale(40%) opacity(0.9); /* Slightly more color on hover for better UX */
    }
    .flag-container.selected:hover .flag-icon {
        filter: grayscale(0%) opacity(1); /* Keep selected flag in full color even on hover */
    }

    /* Toggle Switch */
    .switch {
        position: relative;
        display: inline-block;
        width: 36px;
        height: 20px;
    }
    
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
    }
    
    .slider:before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
    }
    
    input:checked + .slider {
        background-color: #28A9AB;
    }
    
    input:focus + .slider {
        box-shadow: 0 0 1px #28A9AB;
    }
    
    input:checked + .slider:before {
        transform: translateX(16px);
    }
    
    .slider.round {
        border-radius: 34px;
    }
    
    .slider.round:before {
        border-radius: 50%;
    }
    
    /* Modern File Upload Area */
    .file-drop-area {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        border: 2px dashed #e2e8f0;
        border-radius: 0.5rem;
        background-color: #f8fafc;
        transition: all 0.3s ease;
        min-height: 120px;
    }
    
    .file-drop-area:hover,
    .file-drop-area.drag-over {
        border-color: #28A9AB;
        background-color: rgba(40, 169, 171, 0.05);
    }
    
    .file-input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }
    
    .file-preview {
        max-width: 100%;
        max-height: 200px;
        margin-top: 1rem;
    }
    
    /* Floating Action Button for Questions */
    .fab-container {
        position: relative;
        margin: 1.5rem 0;
    }
    
    .fab {
        width: 56px;
        height: 56px;
        background: linear-gradient(135deg, #28A9AB, #B4E495);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .fab:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    }
    
    .fab-menu {
        position: absolute;
        bottom: 70px;
        left: 0;
        right: 0;
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        transition: all 0.3s ease;
        z-index: 10;
    }
    
    .fab-menu.active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    
    .fab-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    
    .fab-item:hover {
        background-color: #f8fafc;
    }
    
    .fab-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1rem;
    }
    
    .icon-mcq {
        background-color: rgba(79, 70, 229, 0.1);
        color: #4F46E5;
    }
    
    .icon-open {
        background-color: rgba(20, 184, 166, 0.1);
        color: #14B8A6;
    }
    
    /* Enhanced Question Cards */
    .question-card {
        border-radius: 0.5rem;
        background-color: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        margin-bottom: 1.5rem;
        transition: all 0.3s ease;
        overflow: hidden;
    }
    
    .question-card:hover {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }
    
    .question-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .question-tag {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.5rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
        color: white;
    }
    
    .tag-mcq {
        background-color: #4F46E5;
    }
    
    .tag-open {
        background-color: #14B8A6;
    }
    
    .question-body {
        padding: 1rem;
    }
    
    .question-actions {
        display: flex;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background-color: #f9fafb;
        border-top: 1px solid #f0f0f0;
    }
    
    /* Option styling for MCQs */
    .option-item {
        display: flex;
        align-items: center;
        margin-bottom: 0.75rem;
    }
    
    .option-radio {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid #d1d5db;
        margin-right: 0.75rem;
        flex-shrink: 0;
    }
    
    .option-input {
        flex-grow: 1;
        padding: 0.5rem;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        transition: all 0.3s ease;
    }
    
    .option-input:focus {
        outline: none;
        border-color: #4F46E5;
        box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
    }
    
    .add-option-btn {
        display: inline-flex;
        align-items: center;
        color: #4F46E5;
        font-size: 0.875rem;
        padding: 0.5rem;
        cursor: pointer;
        border-radius: 0.375rem;
        transition: all 0.3s ease;
    }
    
    .add-option-btn:hover {
        background-color: rgba(79, 70, 229, 0.1);
    }
    
    /* Empty state styling */
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem 2rem;
        background-color: #f8fafc;
        border: 2px dashed #e2e8f0;
        border-radius: 0.5rem;
        margin: 2rem 0;
        text-align: center;
    }
    
    .empty-state-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 1.5rem;
        color: #64748b;
    }
    
    .empty-state-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #252869;
        margin-bottom: 0.5rem;
    }
    
    .empty-state-text {
        color: #64748b;
        margin-bottom: 1.5rem;
    }
    
    .dropdown {
        width: 100%; /* Match the width of other form elements */
        padding: 10px; /* Same padding as text inputs for consistency */
        border: 2px solid #252869; /* Border color to match your theme */
        border-radius: 0.5rem; /* Rounded corners */
        font-family: 'Montserrat', sans-serif; /* Consistent font */
        background-color: white; /* Background color */
        color: #252869; /* Text color */
        font-size: 1rem; /* Appropriate font size */
        -webkit-appearance: none; /* Removes default styling on iOS */
        -moz-appearance: none; /* Removes default styling on Firefox */
        appearance: none; /* Standard way to remove default styling */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path fill="%23252869" d="M5.5,7.5 L10,12 L14.5,7.5 L5.5,7.5 Z"/></svg>'); /* Custom dropdown arrow */
        background-repeat: no-repeat;
        background-position: right 10px top 50%; /* Position the arrow */
        cursor: pointer; /* Change cursor to pointer to indicate it's a dropdown */
    }

    /* Style focus state for accessibility */
    .dropdown:focus {
        outline: none; /* Remove default focus outline */
        border-color: #28A9AB; /* Highlight color when focused */
    }

    .bold {
        font-weight: 900;
    }
</style>
<h1 class="mx-auto font-bold mb-2 p-6 headline" style="width:80%;">Create Survey</h1>
<div class="mx-auto bg-white p-6 rounded-lg shadow" style="width: 80%;">
    <div>
        <p>Create a survey to test concepts or creatives with the target group.</p>
        <p>Add a section per visual or concept you have, and add the questions for the concept in that section.</p>
        <p>Define the target segment you want to respond, and the language they should reply in first.</p>
    </div>
    <form id="surveyForm">
        <input type="hidden" name="user_id" value="1" />
        <div class="mt-4">
            <div class="mb-4">
                <label for="brandName" class="block text-sm font-medium bold">Brand Name</label>
                <input type="text" name="brandName" id="brandName" placeholder="Enter brand name" class="w-full mb-2 p-2 border rounded">
            </div>
            <div class="mb-4" style="display:none;">
                <label for="description" class="block text-sm font-medium bold">Description</label>
                <textarea name="description" id="description" placeholder="Enter optional description, used for keyword analysis etc." class="w-full mb-2 p-2 border rounded"></textarea>
            </div>
            <div class="mb-4">
                @if(auth()->check())
                <label for="segment" class="block text-sm font-medium bold">Select Segment</label>
                <select name="segment" class="dropdown">
                    <option value="">Select Segment</option>
                </select>
                <input type="hidden" name="specs" id="specs" placeholder="Enter extra value">
                <br /><br /><input type="hidden" name="respondents" value="10">
                <p style="display:none;">
                or
                @else
                    <input type="hidden" name="respondents" value="5">
                @endif
                <input type="text" name="segment_desc" id="segment_desc" placeholder="Write a segment desc. like women between 18-25 who likes yoga in Denmark">
                </p>
            </div>
           
            
            <div class="mb-4">
                <label for="language" class="block text-sm font-medium bold">Select Language</label>
                <div class="language-flags flex flex-wrap gap-3 mt-2">
                    <div class="flag-container selected" data-language="English">
                        <img src="https://flagcdn.com/w40/us.png" alt="English" class="flag-icon cursor-pointer" title="English">
                    </div>
                    <div class="flag-container" data-language="Danish">
                        <img src="https://flagcdn.com/w40/dk.png" alt="Danish" class="flag-icon cursor-pointer" title="Danish">
                    </div>
                    <div class="flag-container" data-language="German">
                        <img src="https://flagcdn.com/w40/de.png" alt="German" class="flag-icon cursor-pointer" title="German">
                    </div>
                    <div class="flag-container" data-language="Dutch">
                        <img src="https://flagcdn.com/w40/nl.png" alt="Dutch" class="flag-icon cursor-pointer" title="Dutch">
                    </div>
                    <div class="flag-container" data-language="Norwegian">
                        <img src="https://flagcdn.com/w40/no.png" alt="Norwegian" class="flag-icon cursor-pointer" title="Norwegian">
                    </div>
                    <div class="flag-container" data-language="Swedish">
                        <img src="https://flagcdn.com/w40/se.png" alt="Swedish" class="flag-icon cursor-pointer" title="Swedish">
                    </div>
                </div>
                <input type="hidden" name="language" id="language" value="English">
                <script>
                    $(document).ready(function() {
                        // English is already selected by default
                        
                        $('.flag-container').click(function() {
                            const language = $(this).data('language');
                            $('#language').val(language);
                            $('.flag-container').removeClass('selected');
                            $(this).addClass('selected');
                        });
                    });
                </script>
            </div>
            <!-- The rest of your form goes here -->
        </div>

        <div id="sectionContainer">
            <!-- Sections will be added here dynamically -->
        </div>
        
        <div id="emptySectionState" class="empty-state">
            <div class="empty-state-icon">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
            </div>
            <h3 class="empty-state-title">Add Your First Section</h3>
            <p class="empty-state-text">Create a section to add questions about your concept or creative</p>
            <button type="button" id="addSection" class="primary px-6 py-3 rounded-md font-bold">Create Section</button>
        </div>

        @if(auth()->check())
            <input type="hidden" name="email" value="{{ auth()->user()->email }}">
        @else
            <div class="flex gap-4 mt-4">
                <input type="text" name="email" id="email" placeholder="Write the e-mail to send result link to">
            </div>
        @endif
    
   
        <div id="message" class="message mt-4 mb-4"></div>
        <button id="submit" type="submit" class="mt-4 px-4 py-2 text-white rounded primary">Submit Survey</button>
    </form>
</div>

<!-- Template for a new section with a visual and a headline -->
<template id="sectionTemplate">
    <div class="my-6 p-6 rounded-lg shadow-md section bg-white" data-expanded="true" style="border-left: 4px solid #28A9AB;">
        <div class="mb-4">
            <div class="flex justify-between items-center mb-3">
                <input type="text" name="sectionTitle[]" placeholder="Enter section title like Attitude, Clarity or Video Response" class="w-full p-3 border-b-2 border-gray-200 focus:border-blue-500 transition-all duration-300 outline-none font-semibold text-lg headline" style="background: transparent;">
                <div class="flex items-center">
                    <button type="button" class="section-actions-btn ml-2 text-gray-500 hover:text-gray-700 focus:outline-none">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                        </svg>
                    </button>
                </div>
            </div>
            <input type="hidden" name="sectionType[]" value="manual">
        </div>
        <div class="section-content">
            <!-- Modern File Upload Area -->
            <div class="file-drop-area mb-6">
                <input type="file" name="media[]" class="file-input" accept="image/*,video/*" onchange="handleFileSelect(this)">
                <div class="file-message flex flex-col items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 24 24" stroke="#64748b" class="mb-3">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                    </svg>
                    <p class="text-base font-medium text-gray-700 mb-1">Drag & drop content here</p>
                    <p class="text-sm text-gray-500 mb-3">or</p>
                    <button type="button" class="browse-btn px-4 py-2 bg-gray-100 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-200 transition-colors">Browse Files</button>
                </div>
                <div class="file-preview-container hidden">
                    <div class="file-preview"></div>
                    <div class="flex items-center justify-between mt-3">
                        <span class="filename text-sm text-gray-600"></span>
                        <button type="button" class="remove-file bg-red-50 text-red-500 p-1 rounded-full hover:bg-red-100">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="questionContainer">
                <!-- Questions will be added here dynamically -->
            </div>
            
            <!-- Simple Add Question Button -->
            <div class="flex justify-center mt-4">
                <button type="button" class="add-question px-4 py-2 rounded-md bg-gradient-to-r from-indigo-500 to-blue-500 text-white shadow-md hover:shadow-lg transition-all duration-300 flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="mr-2">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                    </svg>
                    Add Question
                </button>
            </div>
        </div>
    </div>
</template>

<!-- Template for a new attitude section with predefined questions for the radar chart -->
<template id="radarSectionTemplate">
    <div class="my-6 p-6 rounded-lg shadow-md section bg-white" data-section-type="radar" style="border-left: 4px solid #B4E495;">
        <div class="mb-4">
            <div class="flex justify-between items-center mb-3">
                <input type="text" name="sectionTitle[]" placeholder="Enter section title" class="w-full p-3 border-b-2 border-gray-200 focus:border-blue-500 transition-all duration-300 outline-none font-semibold text-lg headline" style="background: transparent;">
                <div class="flex items-center">
                    <button type="button" class="section-actions-btn ml-2 text-gray-500 hover:text-gray-700 focus:outline-none">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                        </svg>
                    </button>
                </div>
            </div>
            <input type="hidden" name="sectionType[]" value="radar">
        </div>
        <div class="questionContainer">
            <!-- Radar questions will be added here -->
        </div>
    </div>
</template>

<!-- Replace both question templates with a single universal template -->
<template id="questionTemplate">
    <div class="question-card mb-6">
        <div class="question-header">
            <div class="flex items-center">
                <span class="question-tag tag-mcq mr-3">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="mr-1">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    Question
                </span>
                <input type="text" name="question[]" placeholder="Enter your question" class="border-0 bg-transparent focus:ring-0 text-gray-800 flex-1">
            </div>
            <button type="button" class="question-delete-btn text-gray-400 hover:text-red-500">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
        <div class="question-body">
            <div class="options-container">
                <!-- Options will be added here -->
            </div>
            <div class="add-option-btn mt-4 inline-flex items-center text-indigo-600 px-3 py-2 rounded hover:bg-indigo-50 transition-colors cursor-pointer">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="mr-1">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
                Add Option
            </div>
        </div>
        <div class="question-actions">
            <div class="flex items-center">
                <span class="text-sm text-gray-500 mr-2">Required</span>
                <label class="switch">
                    <input type="checkbox" name="required[]" value="1">
                    <span class="slider round"></span>
                </label>
            </div>
            <input type="hidden" name="question_type[]" value="open" class="question-type-field">
        </div>
    </div>
</template>

<script>
$(document).ready(function() {
    // Handle adding new section
    $('#addSection').on('click', function() {
        const sectionTemplate = document.getElementById('sectionTemplate');
        const sectionClone = document.importNode(sectionTemplate.content, true);
        
        // Add unique IDs to elements if needed
        const sectionId = 'section_' + Date.now();
        sectionClone.querySelector('.section').id = sectionId;
        
        // Append the new section to the container
        document.getElementById('sectionContainer').appendChild(sectionClone);
        
        // Hide the empty state once sections are added
        document.getElementById('emptySectionState').style.display = 'none';
        
        setupSectionEventListeners(sectionId);
    });
    
    // Initialize event listeners for a new section
    function setupSectionEventListeners(sectionId) {
        const section = document.getElementById(sectionId);
        if (!section) return;
        
        // Setup Add Question button
        const addQuestionBtn = section.querySelector('.add-question');
        addQuestionBtn.addEventListener('click', function() {
            addQuestion(section);
        });
        
        // Setup file upload functionality
        setupFileUpload(section);
    }
    
    // Function to add a question to a section
    function addQuestion(section) {
        const questionContainer = section.querySelector('.questionContainer');
        const template = document.getElementById('questionTemplate');
        const clone = document.importNode(template.content, true);
        
        // Set up delete button
        const deleteBtn = clone.querySelector('.question-delete-btn');
        deleteBtn.addEventListener('click', function() {
            this.closest('.question-card').remove();
        });
        
        // Set up option adding
        const addOptionBtn = clone.querySelector('.add-option-btn');
        addOptionBtn.addEventListener('click', function() {
            const optionsContainer = this.closest('.question-body').querySelector('.options-container');
            const newOption = document.createElement('div');
            newOption.className = 'option-item mb-3';
            newOption.innerHTML = `
                <div class="flex items-center">
                    <div class="option-radio mr-2"></div>
                    <input type="text" name="options[]" placeholder="Option text" class="option-input flex-grow border border-gray-300 rounded-md p-2">
                    <button type="button" class="delete-option ml-2 text-gray-400 hover:text-red-500">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
            `;
            
            // Set up option delete button
            const optionDeleteBtn = newOption.querySelector('.delete-option');
            optionDeleteBtn.addEventListener('click', function() {
                newOption.remove();
                updateQuestionType(this.closest('.question-card'));
            });
            
            optionsContainer.appendChild(newOption);
            
            // Update question type when adding an option
            updateQuestionType(this.closest('.question-card'));
        });
        
        questionContainer.appendChild(clone);
    }
    
    // Update the question type field based on whether there are options or not
    function updateQuestionType(questionCard) {
        const optionsContainer = questionCard.querySelector('.options-container');
        const typeField = questionCard.querySelector('.question-type-field');
        
        if (optionsContainer.children.length > 0) {
            typeField.value = 'mcq';
        } else {
            typeField.value = 'open';
        }
    }
    
    // Setup file upload functionality
    function setupFileUpload(section) {
        const dropArea = section.querySelector('.file-drop-area');
        const input = dropArea.querySelector('.file-input');
        const preview = dropArea.querySelector('.file-preview');
        const previewContainer = dropArea.querySelector('.file-preview-container');
        const message = dropArea.querySelector('.file-message');
        const removeBtn = dropArea.querySelector('.remove-file');
        
        // Handle drag events
        ['dragover', 'dragenter'].forEach(event => {
            dropArea.addEventListener(event, e => {
                e.preventDefault();
                dropArea.classList.add('drag-over');
            });
        });
        
        ['dragleave', 'dragend', 'drop'].forEach(event => {
            dropArea.addEventListener(event, e => {
                e.preventDefault();
                dropArea.classList.remove('drag-over');
            });
        });
        
        // Handle drop
        dropArea.addEventListener('drop', e => {
            const files = e.dataTransfer.files;
            if (files.length) {
                input.files = files;
                displayFile(files[0]);
            }
        });
        
        // Handle file input change
        input.addEventListener('change', () => {
            if (input.files.length) {
                displayFile(input.files[0]);
            }
        });
        
        // Handle file removal
        removeBtn.addEventListener('click', () => {
            input.value = '';
            previewContainer.classList.add('hidden');
            message.style.display = 'flex';
        });
        
        // Function to display the selected file
        function displayFile(file) {
            const reader = new FileReader();
            
            reader.onload = e => {
                if (file.type.match('image.*')) {
                    preview.innerHTML = `<img src="${e.target.result}" alt="${file.name}" class="file-preview">`;
                } else if (file.type.match('video.*')) {
                    preview.innerHTML = `<video src="${e.target.result}" controls class="file-preview"></video>`;
                    
                    // Video compression functionality
                    if (file.size > 10 * 1024 * 1024) { // If larger than 10MB
                        compressVideo(file, dropArea);
                    }
                }
                
                dropArea.querySelector('.filename').textContent = file.name;
                message.style.display = 'none';
                previewContainer.classList.remove('hidden');
            };
            
            reader.readAsDataURL(file);
        }
    }
    
    // Video compression function
    function compressVideo(file, dropArea) {
        const statusElement = document.createElement('div');
        statusElement.className = 'compression-status mt-2 text-sm text-amber-600';
        statusElement.textContent = 'Video is large. Compressing...';
        dropArea.querySelector('.file-preview-container').appendChild(statusElement);
        
        // Here would be the video compression logic using a library like ffmpeg.js
        // This is a placeholder for where that code would go
        
        // For now, just update the status after a delay to simulate compression
        setTimeout(() => {
            statusElement.textContent = 'Video compressed for better upload performance';
            statusElement.className = 'compression-status mt-2 text-sm text-green-600';
        }, 2000);
    }
    
    // Global function for handling file selection from the HTML attribute
    window.handleFileSelect = function(input) {
        const dropArea = input.closest('.file-drop-area');
        const preview = dropArea.querySelector('.file-preview');
        const previewContainer = dropArea.querySelector('.file-preview-container');
        const message = dropArea.querySelector('.file-message');
        
        if (input.files && input.files[0]) {
            const file = input.files[0];
            const reader = new FileReader();
            
            reader.onload = function(e) {
                if (file.type.match('image.*')) {
                    preview.innerHTML = `<img src="${e.target.result}" alt="${file.name}" class="file-preview">`;
                } else if (file.type.match('video.*')) {
                    preview.innerHTML = `<video src="${e.target.result}" controls class="file-preview"></video>`;
                    
                    // Video compression functionality
                    if (file.size > 10 * 1024 * 1024) { // If larger than 10MB
                        compressVideo(file, dropArea);
                    }
                }
                
                dropArea.querySelector('.filename').textContent = file.name;
                message.style.display = 'none';
                previewContainer.classList.remove('hidden');
            };
            
            reader.readAsDataURL(file);
        }
    };
    
    // Original AJAX implementation for fetching segments
    $.ajax({
        url: 'https://audienzes.com/api/v1/audiences/getAudiences?user_id=1',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            console.log('Success:', data);

            platforms = ["instagram","facebook","meta"];
            segments = data.data.filter(segment => platforms.includes(segment.platform));
            $.each(segments, (index, segment) => {
                $('select[name="segment"]').append(`<option value="`+segment.id+`">`+segment.name+`</option>`)
            });
        },
        error: function(xhr, status, error) {
            console.error('Error:', error);
        }
    });
    
    // Modified Brand Name change handler - automatically add radar section
    let hasAddedRadarSection = false;
    
    $('#brandName').on('input', function() {
        const brandName = $(this).val().trim();
        
        if (brandName && !hasAddedRadarSection) {
            // Automatically add the brand perception section once
            addRadarSection();
            hasAddedRadarSection = true;
        }
    });
    
    // Function to add a radar chart section - modified to look like a survey creator view
    function addRadarSection() {
        const template = document.getElementById('radarSectionTemplate');
        const clone = document.importNode(template.content, true);
        
        const sectionId = 'radar_section_' + Date.now();
        clone.querySelector('.section').id = sectionId;
        
        // Get brand name
        const brandName = document.getElementById('brandName').value;
        
        // Set title if brand name is available
        if (brandName) {
            clone.querySelector('input[name="sectionTitle[]"]').value = brandName + ' Brand Perception';
        }
        
        // Add radar dimensions
        const dimensions = [
            'Professional', 'Trustworthy', 'Established', 
            'Modern', 'Innovative', 'Playful', 'Caring'
        ];
        
        const questionContainer = clone.querySelector('.questionContainer');
        
        dimensions.forEach(dimension => {
            const questionCard = document.createElement('div');
            questionCard.className = 'question-card mb-6';
            questionCard.innerHTML = `
                <div class="question-header">
                    <div class="flex items-center">
                        <span class="question-tag tag-mcq mr-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="mr-1">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            Rating
                        </span>
                        <input type="text" name="question[]" value="How ${dimension} is ${brandName || 'this brand'}?" class="border-0 bg-transparent focus:ring-0 text-gray-800 flex-1">
                    </div>
                    <button type="button" class="question-delete-btn text-gray-400 hover:text-red-500">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                <div class="question-body">
                    <div class="p-4 bg-gray-50 rounded-md">
                        <div class="flex justify-between items-center">
                            <div class="text-sm font-medium text-gray-600">Response Type: 1-5 Scale</div>
                            <div class="text-xs text-gray-500">From "Not at all" to "Very much"</div>
                        </div>
                        <div class="mt-2 px-3 py-2 bg-white border border-gray-200 rounded text-sm text-gray-500">
                            This question will display a 1-5 rating scale to respondents
                        </div>
                    </div>
                    <input type="hidden" name="options[]" value="1,2,3,4,5">
                    <input type="hidden" name="question_type[]" value="scale" class="question-type-field">
                </div>
                <div class="question-actions">
                    <div class="flex items-center">
                        <span class="text-sm text-gray-500 mr-2">Required</span>
                        <label class="switch">
                            <input type="checkbox" name="required[]" value="1" checked>
                            <span class="slider round"></span>
                        </label>
                    </div>
                </div>
            `;
            
            questionContainer.appendChild(questionCard);
            
            // Set up delete button
            const deleteBtn = questionCard.querySelector('.question-delete-btn');
            deleteBtn.addEventListener('click', function() {
                this.closest('.question-card').remove();
            });
        });
        
        // Add the radar section to the container
        document.getElementById('sectionContainer').appendChild(clone);
        
        // Hide empty state
        document.getElementById('emptySectionState').style.display = 'none';
    }
    
    // Form submission handling
    $('#surveyForm').on('submit', function(e) {
        // Before submitting, make sure all questions are correctly classified
        $('.question-card').each(function() {
            // Only update regular questions, not rating scale questions which are already classified
            if (!$(this).find('.question-type-field[value="scale"]').length) {
                updateQuestionType(this);
            }
        });
        
        // Continue with form submission
    });
    
    // Prevent form submission when pressing Enter
    $('#surveyForm').on('keypress', function(e) {
        if (e.which === 13 && e.target.type !== 'textarea') {
            e.preventDefault();
        }
    });
});
</script>
@endsection