@extends('layouts.user_type.auth')

@section('content')
    <div class="row justify-content-center">
        <div class="col-lg-12">
            <div class="card shadow-lg border-0">
                <div class="card-header bg-gradient-dark text-white py-4 d-flex justify-content-between align-items-center">
                    <h3 class="mb-0 text-white">Create Tool</h3>
                    <a href="{{ route('tools.show-tools', $user_id) }}" class="btn btn-white btn-sm mb-0">Tools
                        List</a>

                </div>
                <div class="card-body">

                    {{-- Read the $type that was passed from the route --}}
                    @php
                        $tool = isset($type) ? $type : request('type');
                    @endphp

                    {{-- If the user clicked “TransferCall” --}}
                    @if ($tool === 'transfer-call')
                        <h4>TransferCall Tool Form</h4>
                        <form method="POST" action="{{ route('tools.storeTransferCall', $user_id) }}" id="transferCallForm">
                            @csrf

                            {{-- Destinations --}}
                            <div class="mb-3">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="form-label">Destinations</div>
                                    <button type="button" class="btn btn-outline-primary" id="addDestinationBtn">+ Add
                                        Destination</button>
                                </div>
                                <div id="destinations-container"></div>
                            </div>

                            {{-- Function --}}
                            <h5 class="mt-4">Function</h5>

                            <div class="mb-3">
                                <label for="funcName" class="form-label">Name</label>
                                <input type="text" name="funcName" class="form-control" placeholder="Enter function name"
                                    placeholder="transfer_call">

                                <small class="text-muted">Only letters, numbers, dashes, or underscores</small>
                            </div>

                            <div class="mb-3">
                                <label for="funcDescription" class="form-label">Description</label>
                                <textarea name="funcDescription" id="funcDescription" class="form-control" rows="2">This is a sample tool description.</textarea>
                            </div>

                            <div class="mb-3">
                                <label for="destinationType" class="form-label">Destination Type</label>
                                <input type="text" name="destinationType" id="destinationType" class="form-control"
                                    value="sip">
                            </div>

                            <div class="mb-3">
                                <label for="destinationDescription" class="form-label">Destination Description</label>
                                <textarea name="destinationDescription" id="destinationDescription" class="form-control" rows="2">This is a static destination description.</textarea>
                            </div>

                            {{-- Messages --}}
                            <h5 class="mt-4">Messages</h5>
                            <div id="messagesContainer"></div>

                            <button type="button" class="btn btn-outline-primary" id="addMessageBtn">+ Add Message</button>

                            <!-- Submit -->
                            <div class="text-end mt-4">
                                <button type="submit" class="btn btn-success">
                                    <i class="fa fa-save me-1"></i> Create Tool
                                </button>
                            </div>
                        </form>

                        <script>
                            const form = document.getElementById('transferCallForm');

                            // Destination add handler
                            document.getElementById('addDestinationBtn').addEventListener('click', function() {
                                const container = document.getElementById('destinations-container');

                                const newGroup = document.createElement('div');
                                newGroup.classList.add('destination-group', 'border', 'rounded', 'p-3', 'mb-3', 'bg-light');

                                newGroup.innerHTML = `
                                                        <div class="mb-2">
                                                            <label>Type</label>
                                                            <input type="text" name="destinationType" value="number" class="form-control destination-type"
                                                                placeholder="Destination Type">
                                                        </div>
                                                        <div class="mb-2">
                                                            <label>Number</label>
                                                            <input type="text" class="form-control destination-number" value="+15618236919">
                                                        </div>
                                                        <div class="mb-2">
                                                            <label>Message</label>
                                                            <input type="text" class="form-control destination-message" value="Estoy transfiriendo su llamada. Por favor, manténgase en la línea." class="form-control">
                                                        </div>
                                                        <button type="button" class="btn btn-outline-danger deleteDestinationBtn">Delete</button>
                                                    `;


                                container.appendChild(newGroup);
                                newGroup.querySelector('.deleteDestinationBtn').addEventListener('click', () => newGroup.remove());
                            });

                            // Message add handler
                            document.getElementById('addMessageBtn').addEventListener('click', function() {
                                const container = document.getElementById('messagesContainer');

                                const newGroup = document.createElement('div');
                                newGroup.classList.add('card', 'p-3', 'mb-3', 'message-group');

                                newGroup.innerHTML = `
                                                    <div class="mb-2">
                                                        <label class="form-label">Message Type</label>
                                                        <select class="form-control message-type">
                                                            <option value="request-start">Request Start</option>
                                                            <option value="request-failed">Request Failed</option>
                                                            <option value="request-complete">Request Complete</option>
                                                            <option value="request-response-delayed">Request Response Delayed</option>
                                                        </select>
                                                    </div>
                                                    <div class="mb-2">
                                                        <label class="form-label">Message Content</label>
                                                        <textarea class="form-control message-content" rows="2">This is a sample message content.</textarea>
                                                    </div>
                                                    <div class="mb-2">
                                                        <label class="form-label">Condition</label>
                                                        <div class="row">
                                                            <div class="col">
                                                                <input type="text" class="form-control condition-param" placeholder="Param" value="status">
                                                            </div>
                                                            <div class="col">
                                                                <select class="form-control condition-operator">
                                                                    <option value="eq">Equal (eq)</option>
                                                                    <option value="neq">Not Equal (neq)</option>
                                                                    <option value="gt">Greater Than (gt)</option>
                                                                    <option value="gte">Greater Than or Equal (gte)</option>
                                                                    <option value="lt">Less Than (lt)</option>
                                                                    <option value="lte">Less Than or Equal (lte)</option>
                                                                </select>
                                                            </div>
                                                            <div class="col">
                                                                <input type="text" class="form-control condition-value" placeholder="Value" value="200">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <button type="button" class="btn btn-outline-danger deleteMessageBtn">Delete</button>
                                                `;

                                container.appendChild(newGroup);
                                newGroup.querySelector('.deleteMessageBtn').addEventListener('click', () => newGroup.remove());
                            });

                            // Form submission
                            form.addEventListener('submit', function(e) {
                                e.preventDefault();

                                const destinations = [];
                                document.querySelectorAll('.destination-group').forEach(group => {
                                    destinations.push({
                                        type: group.querySelector('.destination-type').value,
                                        number: group.querySelector('.destination-number').value,
                                        message: group.querySelector('.destination-message').value
                                    });
                                });

                                const messages = [];
                                document.querySelectorAll('.message-group').forEach(group => {
                                    messages.push({
                                        type: group.querySelector('.message-type').value,
                                        content: group.querySelector('.message-content').value,
                                        condition_param: group.querySelector('.condition-param').value,
                                        condition_operator: group.querySelector('.condition-operator').value,
                                        condition_value: group.querySelector('.condition-value').value
                                    });
                                });

                                // Clear previous hidden fields
                                document.querySelectorAll('input[name="destinations"], input[name="messages"]').forEach(el => el
                                    .remove());

                                // Create hidden fields
                                const destInput = document.createElement('input');
                                destInput.type = 'hidden';
                                destInput.name = 'destinations';
                                destInput.value = JSON.stringify(destinations);
                                form.appendChild(destInput);

                                const msgInput = document.createElement('input');
                                msgInput.type = 'hidden';
                                msgInput.name = 'messages';
                                msgInput.value = JSON.stringify(messages);
                                form.appendChild(msgInput);

                                // ✅ Final submission
                                form.submit();
                            });
                        </script>
                        {{-- If the user clicked “Google Calendar” --}}
                    @elseif($tool === 'google-calendar')
                        <h4>Google Calendar</h4>

                        <form method="POST"
                            action="{{ route('tools.googleCalendarStore', ['type' => 'gbooking', 'id' => $user_id ?? auth()->id()]) }}">
                            @csrf

                            <!-- Hidden Inputs -->
                            <input type="hidden" name="tool_data" id="toolDataInput">

                            <!-- 1) Name -->
                            <div class="mb-3">
                                <label for="toolName" class="form-label">Name</label>
                                <input type="text" id="toolName" class="form-control" placeholder="Enter name">
                            </div>

                            <!-- 2) Description -->
                            <div class="mb-3">
                                <label for="toolDescription" class="form-label">Description</label>
                                <textarea id="toolDescription" class="form-control" rows="2" placeholder="Enter description"></textarea>
                            </div>

                            <!-- 3) Available Google Calendars -->
                            <div class="mb-3">
                                <label for="availableCalendars" class="form-label">Available Google Calendars</label>
                                <select id="availableCalendars" name="calendar_id" class="form-control">
                                    <option value="" selected>Select a Calendar</option>
                                </select>
                            </div>

                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary">Create Tool</button>
                                <button type="button" class="btn btn-secondary ms-2">Close</button>
                            </div>
                        </form>

                        <!-- Load Google Calendars -->
                        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                        <script>
                            $(function() {
                                const userId = @json($user_id ?? auth()->id());

                                $.ajax({
                                    url: "{{ route('google.calendars') }}",
                                    method: 'GET',
                                    data: {
                                        user_id: userId
                                    }
                                }).done(function(data) {
                                    if (Array.isArray(data)) {
                                        $('#availableCalendars').html('<option value="">Select a Calendar</option>');
                                        data.forEach(function(calendar) {
                                            $('#availableCalendars').append(
                                                `<option value="${calendar.id}">${calendar.summary}</option>`
                                            );
                                        });
                                    } else {
                                        $('#availableCalendars').html('<option disabled>No calendars found</option>');
                                    }
                                }).fail(function() {
                                    $('#availableCalendars').html('<option disabled>Error loading calendars</option>');
                                });
                            });
                        </script>

                        <!-- Final JS to submit with tool_data -->
                        <script>
                            document.querySelector('form').addEventListener('submit', function(e) {
                                e.preventDefault();

                                const name = document.getElementById('toolName').value;
                                const description = document.getElementById('toolDescription').value;
                                const calendarId = document.getElementById('availableCalendars').value;

                                // Optional validation
                                // if (!name || !description || !calendarId) {
                                //     alert('All fields are required.');
                                //     return;
                                // }

                                const userId = @json($user_id ?? auth()->id());

                                const requestJson = {
                                    type: "function",
                                    async: false,
                                    function: {
                                        name: name,
                                        description: description,
                                        async: false,
                                        parameters: {
                                            type: "object",
                                            properties: {
                                                Name: {
                                                    type: "string",
                                                    description: "Booking Name"
                                                },
                                                Email: {
                                                    type: "string",
                                                    description: "Booking Email"
                                                },
                                                Phone: {
                                                    type: "string",
                                                    description: "Booking Phone"
                                                },
                                                BookingDayTime: {
                                                    type: "string",
                                                    description: "Booking day and time"
                                                },
                                                Service: {
                                                    type: "string",
                                                    description: "Service"
                                                }
                                            },
                                            required: ["Name", "Email", "BookingDayTime"]
                                        }
                                    },
                                    server: {
                                        secret: "",
                                        url: `https://ithinqai-admin.ithinq.ai/api/google_calender_tool_webhook?userID=${userId}`
                                    },
                                    messages: [{
                                            content: "Booking in progress...",
                                            type: "request-start"
                                        },
                                        {
                                            content: "Waiting for response...",
                                            type: "request-response-delayed"
                                        },
                                        {
                                            content: "Something went wrong. Please try again.",
                                            type: "request-failed"
                                        },
                                        {
                                            content: "Booking confirmed. Thank you!",
                                            type: "request-complete"
                                        }
                                    ]
                                };

                                document.getElementById('toolDataInput').value = JSON.stringify(requestJson);
                                e.target.submit();
                            });
                        </script>
                    @elseif($tool === 'google-sheet')
                        <h4>Google Sheet</h4>
                        <form method="POST"
                            action="{{ route('tools.googleSheetStore', ['type' => 'googleSheet', 'id' => $user_id ?? auth()->id()]) }}"
                            onsubmit="return prepareGoogleSheetToolData();">
                            @csrf
                            <input type="hidden" name="tool_data" id="toolDataInput">

                            <!-- Tool Name -->
                            <div class="mb-3">
                                <label for="googlesheetToolName" class="form-label">Tool Name</label>
                                <input type="text" id="googlesheetToolName" class="form-control" value="">
                            </div>

                            <!-- Description -->
                            <div class="mb-3">
                                <label for="googleSheetDescription" class="form-label">Description</label>
                                <textarea id="googleSheetDescription" class="form-control" rows="3" placeholder="Describe the tool"></textarea>
                            </div>

                            <!-- From Phone Number -->
                            <div class="mb-3">
                                <label for="userCase" class="form-label">Use Case</label>
                                <select id="userCase" name="usercase" class="form-select">
                                    <option value="">-- Select a use case --</option>
                                    <option value="real_estate">Real Estate</option>
                                    <option value="lead_intake">Lead Intake & Quote Tracker (Insurance)</option>
                                    <option value="case_intake">Case Intake & Client Tracker</option>
                                    <option value="primary_care">Primary Care Appointment Tracker</option>
                                    <option value="car_dealership">Car Dealership Inventory & Test Drives</option>
                                </select>
                            </div>

                            <!-- Sheet Dropdown -->
                            <div class="mb-3">
                                <label for="googleSheetDropdown" class="form-label">Select Google Sheet</label>
                                <select id="googleSheetDropdown" name="google_sheet" class="form-select">
                                    <option value="">-- Select a Sheet --</option>
                                </select>
                            </div>
                            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

                            <script>
                                $(document).ready(function() {
                                    const userId = "{{ $user_id }}";

                                    $.ajax({
                                        url: `/get_google_sheets?user_id=${userId}`,
                                        method: "GET",
                                        success: function(sheets) {
                                            let dropdown = $('#googleSheetDropdown');
                                            dropdown.empty().append('<option value="">-- Select a Sheet --</option>');
                                            sheets.forEach(sheet => {
                                                dropdown.append(`<option value="${sheet.id}">${sheet.name}</option>`);
                                            });
                                        },
                                        error: function(xhr) {
                                            console.error("Failed to load sheets:", xhr.responseJSON || xhr.statusText);
                                        }
                                    });
                                });
                            </script>

                            <!-- 4) Messages Section -->
                            <div class="mb-3">
                                <div class="mb-3 d-flex align-items-center justify-content-between">
                                    <div class="form-label">Messages</div>
                                    <!-- dropdown-toggle button -->
                                    <button type="button" id="addMessageButton"
                                        class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        + Add Message
                                    </button>
                                    <!-- dropdown menu -->
                                    <ul class="dropdown-menu" id="messageTypeMenu">
                                        <li><a class="dropdown-item" href="#" data-type="start">Request Start</a>
                                        </li>
                                        <li><a class="dropdown-item" href="#" data-type="complete">Request
                                                Complete</a></li>
                                        <li><a class="dropdown-item" href="#" data-type="failed">Request Failed</a>
                                        </li>
                                        <li><a class="dropdown-item" href="#" data-type="delayed">Request Response
                                                Delayed</a></li>
                                    </ul>
                                </div>

                                <div id="messageList" class="border rounded p-2 mb-2" style="min-height: 100px;">
                                    <p class="text-muted">
                                        No messages configured. Click “Add Message” to add your first message.
                                    </p>
                                </div>
                            </div>

                            <script>
                                (function() {
                                    let messageCount = 0;
                                    const menu = document.getElementById('messageTypeMenu');
                                    const list = document.getElementById('messageList');

                                    // 1) Hook up the dropdown items
                                    menu.querySelectorAll('.dropdown-item').forEach(item => {
                                        item.addEventListener('click', e => {
                                            e.preventDefault();
                                            const type = item.dataset.type;
                                            addMessageForm(type);
                                        });
                                    });

                                    // 2) Build + append the selected form
                                    function addMessageForm(type) {
                                        messageCount++;
                                        const id = messageCount;

                                        // remove placeholder text
                                        const placeholder = list.querySelector('.text-muted');
                                        if (placeholder) placeholder.remove();

                                        // wrapper for the new form
                                        const wrapper = document.createElement('div');
                                        wrapper.className = 'border rounded p-3 mb-3 message-group';

                                        // form HTML per type
                                        let html = '';
                                        switch (type) {
                                            case 'start':
                                                html = `
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <h5 class="mb-0">Request Start</h5>
                                                    <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                                </div>
                                                <div class="mb-2">
                                                    <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="msgType${id}" id="default${id}" checked>
                                                    <label class="form-check-label" for="default${id}">
                                                        Default (server will use default message)
                                                    </label>
                                                    </div>
                                                    <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="msgType${id}" id="none${id}">
                                                    <label class="form-check-label" for="none${id}">
                                                        None (no message will be spoken)
                                                    </label>
                                                    </div>
                                                    <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="msgType${id}" id="custom${id}">
                                                    <label class="form-check-label" for="custom${id}">Custom</label>
                                                    </div>
                                                </div>
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="wait${id}">
                                                    <label class="form-check-label" for="wait${id}">
                                                    Wait for message to be spoken before triggering tool call
                                                    </label>
                                                </div>
                                                <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                                <div class="conditionsContainer"></div>
                                                `;
                                                break;

                                            case 'complete':
                                                html = `
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <h5 class="mb-0">Request Complete</h5>
                                                    <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                                </div>
                                                <div class="mb-2">
                                                    <textarea class="form-control mb-2" rows="2" placeholder="Enter message content…"></textarea>
                                                </div>
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="end${id}">
                                                    <label class="form-check-label" for="end${id}">
                                                    End the call after message is spoken
                                                    </label>
                                                </div>
                                                <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                                <div class="conditionsContainer"></div>
                                                `;
                                                break;

                                            case 'failed':
                                                html = `
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <h5 class="mb-0">Request Failed</h5>
                                                    <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                                </div>
                                                <div class="mb-2">
                                                    <textarea class="form-control mb-2" rows="2" placeholder="Enter message content…"></textarea>
                                                </div>
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="endFail${id}">
                                                    <label class="form-check-label" for="endFail${id}">
                                                    End the call after message is spoken
                                                    </label>
                                                </div>
                                                <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                                <div class="conditionsContainer"></div>
                                                `;
                                                break;

                                            case 'delayed':
                                                html = `
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <h5 class="mb-0">Request Response Delayed</h5>
                                                    <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                                </div>
                                                <div class="mb-2">
                                                    <textarea class="form-control mb-2" rows="2" placeholder="Enter message content…"></textarea>
                                                </div>
                                                <div class="mb-2">
                                                    <label class="form-label" for="timing${id}">Timing (milliseconds)</label>
                                                    <input type="number" id="timing${id}" class="form-control mb-2" value="1000">
                                                </div>
                                                <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                                <div class="conditionsContainer"></div>
                                                `;
                                                break;
                                        }

                                        wrapper.innerHTML = html;
                                        list.appendChild(wrapper);

                                        // Delete message
                                        wrapper.querySelector('.deleteMessageBtn')
                                            .addEventListener('click', () => {
                                                wrapper.remove();
                                                // if none left, restore placeholder
                                                if (!list.querySelector('.message-group')) {
                                                    list.innerHTML = `<p class="text-muted">
                                                    No messages configured. Click “Add Message” to add your first message.
                                                </p>`;
                                                }
                                            });

                                        // Add Condition
                                        wrapper.querySelector('.addConditionBtn')
                                            .addEventListener('click', e => {
                                                e.preventDefault();
                                                const conds = wrapper.querySelector('.conditionsContainer');
                                                const cond = document.createElement('div');
                                                cond.className = 'mb-2 condition-group';
                                                cond.innerHTML = `
                                                <div class="row g-2 align-items-center">
                                                    <div class="col">
                                                    <input type="text" class="form-control form-control-sm" placeholder="Param">
                                                    </div>
                                                    <div class="col">
                                                    <select class="form-control form-control-sm">
                                                        <option value="eq">Equal (eq)</option>
                                                        <option value="neq">Not Equal (neq)</option>
                                                        <option value="gt">Greater Than (gt)</option>
                                                        <option value="gte">Greater Than or Equal (gte)</option>
                                                        <option value="lt">Less Than (lt)</option>
                                                        <option value="lte">Less Than or Equal (lte)</option>
                                                    </select>
                                                    </div>
                                                    <div class="col">
                                                    <input type="text" class="form-control form-control-sm" placeholder="Value">
                                                    </div>
                                                    <div class="col-auto">
                                                    <button type="button" class="btn btn-outline-danger btn-sm deleteConditionBtn">
                                                        Delete
                                                    </button>
                                                    </div>
                                                </div>
                                                `;
                                                conds.appendChild(cond);

                                                // wire up delete for this condition
                                                cond.querySelector('.deleteConditionBtn')
                                                    .addEventListener('click', e => {
                                                        e.preventDefault();
                                                        cond.remove();
                                                    });
                                            });
                                    }
                                })();
                            </script>

                            <!-- 5) Create Tool & Close Buttons -->
                            <div class="d-flex justify-content-end mt-4">
                                <button type="submit" class="btn btn-primary">Create Tool</button>
                            </div>
                        </form>

                        <script>
                            function prepareGoogleSheetToolData() {
                                const userId = `{{ $user_id ?? auth()->id() }}`;
                                const tool = {
                                    type: "function",
                                    async: false,
                                    function: {
                                        name: document.getElementById('googlesheetToolName').value,
                                        description: document.getElementById('googleSheetDescription').value,
                                        async: false,
                                        parameters: {
                                            type: "object",
                                            properties: {
                                                Query: {
                                                    type: "string",
                                                    description: "User Query"
                                                },
                                                Name: {
                                                    type: "string",
                                                    description: "User Name"
                                                },
                                                Phone: {
                                                    type: "string",
                                                    description: "User Phone"
                                                }
                                            }
                                        }
                                    },
                                    messages: [], // <-- we'll fill this below
                                    server: {
                                        secret: "",
                                        url: `https://ithinqai-admin.ithinq.ai/api/google_sheet_tool_webhook?userID=${userId}`
                                    },
                                };


                                // Collect all messages from messageList
                                const messageGroups = document.querySelectorAll('.message-group');
                                messageGroups.forEach(group => {
                                    const title = group.querySelector('h5')?.innerText?.trim();
                                    const type = title?.toLowerCase().replace(/\s+/g, '-');

                                    const textarea = group.querySelector('textarea');
                                    const content = textarea ? textarea.value.trim() : null;

                                    const waitCheckbox = group.querySelector('input[id^=wait]');
                                    const endCheckbox = group.querySelector('input[id^=end]');
                                    const endFailCheckbox = group.querySelector('input[id^=endFail]');
                                    const timingInput = group.querySelector('input[id^=timing]');

                                    // Add conditions
                                    const conditions = [];
                                    group.querySelectorAll('.condition-group').forEach(cond => {
                                        const param = cond.querySelector('input[placeholder="Param"]').value.trim();
                                        const op = cond.querySelector('select').value;
                                        const value = cond.querySelector('input[placeholder="Value"]').value.trim();

                                        if (param && value) {
                                            conditions.push({
                                                param,
                                                op,
                                                value
                                            });
                                        }
                                    });

                                    const messageObj = {
                                        type: type,
                                        content: content,
                                        wait: waitCheckbox?.checked || false,
                                        end: endCheckbox?.checked || endFailCheckbox?.checked || false,
                                        timing: timingInput ? parseInt(timingInput.value) || 1000 : undefined,
                                        conditions: conditions
                                    };

                                    // Remove empty/null fields
                                    Object.keys(messageObj).forEach(key => {
                                        if (
                                            messageObj[key] === undefined ||
                                            messageObj[key] === null ||
                                            (Array.isArray(messageObj[key]) && messageObj[key].length === 0) ||
                                            messageObj[key] === ''
                                        ) {
                                            delete messageObj[key];
                                        }
                                    });

                                    tool.messages.push(messageObj);
                                });

                                // Final JSON
                                tool.sheet_id = document.getElementById('googleSheetDropdown').value;
                                tool.use_case = document.getElementById('userCase').value,

                                    document.getElementById('toolDataInput').value = JSON.stringify(tool);
                                return true;
                            }
                        </script>

                        {{-- If the user clicked “Google Calendar Check Availability” --}}
                    @elseif($tool === 'google-calendar-check')
                        <h4>Google Calendar Check Availability Form</h4>
                        <form method="POST" action="{{ route('tools.storeGoogleCalendarCheck', $user_id) }}"
                            id="transferCallForm">
                            @csrf

                            <!-- 1) Type (readonly) -->
                            <div class="mb-3">
                                <label for="gccType" class="form-label">Type</label> 
                                <input type="text" id="gccType" class="form-control" value="googleCalendarCheck" readonly>
                            </div>

                            <div class="mb-3">
                                <label for="funcName" class="form-label">Name</label>
                                <input type="text" name="toolName" id="funcName" class="form-control"
                                    placeholder="Enter tool name">
                                <small class="text-muted">Only letters, numbers, dashes, or underscores</small>
                            </div>

                            {{-- Tool Description --}}
                            <div class="mb-3">
                                <label for="funcDescription" class="form-label">Description</label>
                                <textarea name="toolDescription" id="funcDescription" class="form-control" rows="2"
                                    placeholder="Enter tool description"></textarea>
                            </div>

                            {{-- Calendar ID --}}
                            <div class="mb-3">
                                <label for="calendar_id" class="form-label">Calendar ID</label>
                                <input type="text" name="checkCalendarId" id="calendar_id" class="form-control"
                                    placeholder="Enter calendar ID">
                            </div>

                            {{-- Date --}}
                            <div class="mb-3">
                                <label for="date" class="form-label">Date</label>
                                <input type="date" name="checkDate" id="date" class="form-control">
                            </div>

                            {{-- Time --}}
                            <div class="mb-3">
                                <label for="time" class="form-label">Time</label>
                                <input type="time" name="checkTime" id="time" class="form-control">
                            </div>

                            <!-- Submit -->
                            <div class="text-end mt-4">
                                <button type="submit" class="btn btn-success">
                                    <i class="fa fa-save me-1"></i> Create Tool
                                </button>
                            </div>
                        </form>



                        {{-- If the user clicked “GHL Calendar” --}}
                    @elseif($tool === 'ghl-calendar')
                        <h4>GHL Calendar</h4>
                        <form method="POST"
                            action="{{ route('tools.ghlCalendarStore', ['type' => 'booking', 'id' => $user_id ?? auth()->id()]) }}">
                            @csrf
                            <input type="hidden" name="tool_data" id="toolDataInput">
                            <input type="hidden" name="location_id" id="locationInput">
                            <input type="hidden" name="calendar_id" id="calendarInput">

                            <!-- 1) Name -->
                            <div class="mb-3">
                                <label for="toolName" class="form-label">Name</label>
                                <input type="text" id="toolName" class="form-control" placeholder="Enter name">
                            </div>
                            <!-- 2) Description -->
                            <div class="mb-3">
                                <label for="toolDescription" class="form-label">Description</label>
                                <textarea id="toolDescription" class="form-control" rows="2" placeholder="Enter the Property description"></textarea>
                            </div>
                            <!-- 3) Available Locations -->
                            <div class="mb-3">
                                <label for="availableLocations" class="form-label">Available Locations</label>
                                <select id="availableLocations" name="location" class="form-control">
                                    <option value="" selected>Select a location</option>
                                    @foreach ($locations as $location)
                                        <option value="{{ $location }}">{{ $location }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- 4) Select Calendar (select) -->
                            <!-- Select Calendar -->
                            <div class="mb-3">
                                <label for="selectCalendar" class="form-label">Select Calendar</label>
                                <select id="selectCalendar" name="calendar" class="form-control">
                                    <option value="" selected>Select a calendar</option>
                                </select>
                            </div>

                            <!-- Include jQuery -->
                            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                            <script>
                                $('#availableLocations').on('change', function() {
                                    const locationId = $(this).val();
                                    if (!locationId) return;

                                    $('#selectCalendar').html('<option>Loading...</option>');

                                    $.ajax({
                                        url: `/get_ghl_calenders?location_id=${locationId}`,
                                        method: 'GET'
                                    }).done(function(res) {
                                        $('#selectCalendar').empty().append(`<option value="">Select a calendar</option>`);
                                        if (res.calendars && res.calendars.length > 0) {
                                            res.calendars.forEach(function(calendar) {
                                                $('#selectCalendar').append(
                                                    `<option value="${calendar.id}">${calendar.name}</option>`
                                                );
                                            });
                                        } else {
                                            $('#selectCalendar').html('<option disabled>No calendars found</option>');
                                        }
                                    }).fail(function() {
                                        $('#selectCalendar').html('<option disabled>Error loading calendars</option>');
                                    });
                                });
                            </script>
                            <!-- 9) Create Tool & Close Buttons -->
                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary">Create Tool</button>
                                <button type="button" class="btn btn-secondary ms-2">Close</button>
                            </div>
                        </form>
                        <script>
                            document.querySelector('form').addEventListener('submit', function(e) {
                                e.preventDefault();

                                const toolName = document.getElementById('toolName').value;
                                const toolDesc = document.getElementById('toolDescription').value;
                                const location = document.getElementById('availableLocations').value;
                                const calendar = document.getElementById('selectCalendar').value;

                                // Simple validation
                                if (!toolName || !toolDesc || !location || !calendar) {
                                    alert('All fields are required.');
                                    return;
                                }

                                // Set the location and calendar hidden fields
                                document.getElementById('locationInput').value = location;
                                document.getElementById('calendarInput').value = calendar;

                                // Build the requestJson like in React version
                                const requestJson = {
                                    type: "function",
                                    async: false,
                                    function: {
                                        name: toolName,
                                        description: toolDesc,
                                        async: false,
                                        parameters: {
                                            type: "object",
                                            properties: {
                                                Name: {
                                                    type: "string",
                                                    description: "Booking Name"
                                                },
                                                Email: {
                                                    type: "string",
                                                    description: "Booking Email"
                                                },
                                                Phone: {
                                                    type: "string",
                                                    description: "Booking Phone"
                                                },
                                                BookingDayTime: {
                                                    type: "string",
                                                    description: "Booking day and time"
                                                },
                                                Service: {
                                                    type: "string",
                                                    description: "Service"
                                                }
                                            },
                                            required: ["Name", "Email", "BookingDayTime"]
                                        }
                                    },
                                    server: {
                                        secret: "",
                                        url: "https://ithinqai-admin.ithinq.ai/api/tool_webhook?userID={{ $user_id ?? auth()->id() }}"
                                        // url: "http://127.0.0.1:8000/api/tool_webhook?userID={{ $user_id ?? auth()->id() }}"
                                    },
                                    messages: [{
                                            content: "Booking in progress...",
                                            type: "request-start"
                                        },
                                        {
                                            content: "Waiting for response...",
                                            type: "request-response-delayed"
                                        },
                                        {
                                            content: "Something went wrong. Please try again.",
                                            type: "request-failed"
                                        },
                                        {
                                            content: "Booking confirmed. Thank you!",
                                            type: "request-complete"
                                        }
                                    ]
                                };


                                // Insert final JSON string into hidden input
                                document.getElementById('toolDataInput').value = JSON.stringify(requestJson);

                                // Submit the form
                                e.target.submit();
                            });
                        </script>

                        {{-- If the user clicked “Query” --}}
                    @elseif($tool === 'query')
                        <h4>Query Tool</h4>
                        <form method="POST"
                            action="{{ route('tools.queryStore', ['type' => 'query', 'id' => isset($user_id) ? $user_id : auth()->id()]) }}">
                            @csrf
                            <input type="hidden" name="tool_data" id="toolDataInput">
                            <!-- 1) Tool Name -->
                            <div class="mb-3">
                                <label for="toolName" class="form-label">Tool Name</label>
                                <input type="text" id="toolName" class="form-control"
                                    placeholder="Enter the tool name...">
                            </div>

                            <!-- 2) Description -->
                            <div class="mb-3">
                                <label for="toolDescription" class="form-label">Description</label>
                                <textarea id="toolDescription" class="form-control" rows="3"
                                    placeholder="Describe the tool in a few sentences..."></textarea>
                            </div>

                            <!-- 3) Knowledge Bases Section -->
                            <div class="mb-3">
                                <!-- Knowledge Base Section -->
                                <div class="mb-3 d-flex align-items-center justify-content-between">
                                    <div class="form-label">Knowledge Bases</div>
                                    <button type="button" id="addKbButton" class="btn btn-primary btn-sm">+ Add
                                        Knowledge Base</button>
                                </div>
                                <div id="kbList">
                                    <!-- Dynamically added Knowledge Base forms will appear here -->
                                </div>
                            </div>

                            <script>
                                // Function to handle the addition of a new Knowledge Base
                                document.getElementById('addKbButton').addEventListener('click', function() {
                                    var container = document.getElementById('kbList');

                                    // Create a new knowledge base entry
                                    var newKb = document.createElement('div');
                                    newKb.classList.add('d-flex', 'flex-column', 'mb-3', 'border', 'p-3');

                                    newKb.innerHTML = `
                                        <div class="d-flex justify-content-between">
                                            <button type="button" class="btn btn-outline-danger btn-sm deleteKbButton">Delete</button>
                                        </div>
                                        <div class="mb-2">
                                            <input type="text" class="form-control form-control-sm mb-2" placeholder="Knowledge Base Name">
                                        </div>
                                        <div class="mb-2">
                                            <textarea class="form-control form-control-sm mb-2" placeholder="Description"></textarea>
                                        </div>

                                        <!-- File ID Section within Knowledge Base -->
                                        <div class="mb-3">
                                            <label class="form-label">File ID (UUID)</label>
                                            <div class="fileIdsContainer">
                                                <p class="text-muted">No File IDs configured. Click “Add File ID” to add one.</p>
                                            </div>
                                            <button type="button" class="btn btn-primary btn-sm addFileIdButton">+ Add File ID</button>
                                        </div>
                                    `;

                                    // Append the new knowledge base entry to the list
                                    container.appendChild(newKb);

                                    // Delete button functionality for Knowledge Base
                                    var deleteKbButton = newKb.querySelector('.deleteKbButton');
                                    deleteKbButton.addEventListener('click', function() {
                                        newKb.remove();
                                    });

                                    // Add File ID functionality for the new Knowledge Base
                                    var addFileIdButton = newKb.querySelector('.addFileIdButton');
                                    addFileIdButton.addEventListener('click', function() {
                                        var fileIdsContainer = newKb.querySelector('.fileIdsContainer');

                                        // Create a new file ID entry
                                        var newFileId = document.createElement('div');
                                        newFileId.classList.add('d-flex', 'align-items-center', 'mb-2');

                                        newFileId.innerHTML = `
                                            <input type="text" class="form-control form-control-sm mb-2" placeholder="e.g. 123e4567-e89b-12d3-a456-426614174000">
                                            <button type="button" class="btn btn-outline-danger btn-sm deleteFileIdButton">Delete</button>
                                        `;

                                        // Append the new file ID entry to the file ID container
                                        fileIdsContainer.appendChild(newFileId);

                                        // Delete button functionality for File ID
                                        var deleteFileIdButton = newFileId.querySelector('.deleteFileIdButton');
                                        deleteFileIdButton.addEventListener('click', function() {
                                            newFileId.remove();
                                        });
                                    });
                                });
                            </script>

                            <!-- 4) Messages Section -->
                            <div class="mb-3">
                                <div class="mb-3 d-flex align-items-center justify-content-between">
                                    <div class="form-label">Messages</div>
                                    <!-- dropdown-toggle button -->
                                    <button type="button" id="addMessageButton"
                                        class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        + Add Message
                                    </button>
                                    <!-- dropdown menu -->
                                    <ul class="dropdown-menu" id="messageTypeMenu">
                                        <li><a class="dropdown-item" href="#" data-type="start">Request Start</a>
                                        </li>
                                        <li><a class="dropdown-item" href="#" data-type="complete">Request
                                                Complete</a></li>
                                        <li><a class="dropdown-item" href="#" data-type="failed">Request Failed</a>
                                        </li>
                                        <li><a class="dropdown-item" href="#" data-type="delayed">Request Response
                                                Delayed</a></li>
                                    </ul>
                                </div>

                                <div id="messageList" class="border rounded p-2 mb-2" style="min-height: 100px;">
                                    <p class="text-muted">
                                        No messages configured. Click “Add Message” to add your first message.
                                    </p>
                                </div>
                            </div>

                            <script>
                                (function() {
                                    let messageCount = 0;
                                    const menu = document.getElementById('messageTypeMenu');
                                    const list = document.getElementById('messageList');

                                    // 1) Hook up the dropdown items
                                    menu.querySelectorAll('.dropdown-item').forEach(item => {
                                        item.addEventListener('click', e => {
                                            e.preventDefault();
                                            const type = item.dataset.type;
                                            addMessageForm(type);
                                        });
                                    });

                                    // 2) Build + append the selected form
                                    function addMessageForm(type) {
                                        messageCount++;
                                        const id = messageCount;

                                        // remove placeholder text
                                        const placeholder = list.querySelector('.text-muted');
                                        if (placeholder) placeholder.remove();

                                        // wrapper for the new form
                                        const wrapper = document.createElement('div');
                                        wrapper.className = 'border rounded p-3 mb-3 message-group';

                                        // form HTML per type
                                        let html = '';
                                        switch (type) {
                                            case 'start':
                                                html = `
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <h5 class="mb-0">Request Start</h5>
                                                    <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                                </div>
                                                <div class="mb-2">
                                                    <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="msgType${id}" id="default${id}" checked>
                                                    <label class="form-check-label" for="default${id}">
                                                        Default (server will use default message)
                                                    </label>
                                                    </div>
                                                    <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="msgType${id}" id="none${id}">
                                                    <label class="form-check-label" for="none${id}">
                                                        None (no message will be spoken)
                                                    </label>
                                                    </div>
                                                    <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="msgType${id}" id="custom${id}">
                                                    <label class="form-check-label" for="custom${id}">Custom</label>
                                                    </div>
                                                </div>
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="wait${id}">
                                                    <label class="form-check-label" for="wait${id}">
                                                    Wait for message to be spoken before triggering tool call
                                                    </label>
                                                </div>
                                                <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                                <div class="conditionsContainer"></div>
                                                `;
                                                break;

                                            case 'complete':
                                                html = `
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <h5 class="mb-0">Request Complete</h5>
                                                    <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                                </div>
                                                <div class="mb-2">
                                                    <textarea class="form-control mb-2" rows="2" placeholder="Enter message content…"></textarea>
                                                </div>
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="end${id}">
                                                    <label class="form-check-label" for="end${id}">
                                                    End the call after message is spoken
                                                    </label>
                                                </div>
                                                <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                                <div class="conditionsContainer"></div>
                                                `;
                                                break;

                                            case 'failed':
                                                html = `
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <h5 class="mb-0">Request Failed</h5>
                                                    <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                                </div>
                                                <div class="mb-2">
                                                    <textarea class="form-control mb-2" rows="2" placeholder="Enter message content…"></textarea>
                                                </div>
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="endFail${id}">
                                                    <label class="form-check-label" for="endFail${id}">
                                                    End the call after message is spoken
                                                    </label>
                                                </div>
                                                <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                                <div class="conditionsContainer"></div>
                                                `;
                                                break;

                                            case 'delayed':
                                                html = `
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <h5 class="mb-0">Request Response Delayed</h5>
                                                    <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                                </div>
                                                <div class="mb-2">
                                                    <textarea class="form-control mb-2" rows="2" placeholder="Enter message content…"></textarea>
                                                </div>
                                                <div class="mb-2">
                                                    <label class="form-label" for="timing${id}">Timing (milliseconds)</label>
                                                    <input type="number" id="timing${id}" class="form-control mb-2" value="1000">
                                                </div>
                                                <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                                <div class="conditionsContainer"></div>
                                                `;
                                                break;
                                        }

                                        wrapper.innerHTML = html;
                                        list.appendChild(wrapper);

                                        // Delete message
                                        wrapper.querySelector('.deleteMessageBtn')
                                            .addEventListener('click', () => {
                                                wrapper.remove();
                                                // if none left, restore placeholder
                                                if (!list.querySelector('.message-group')) {
                                                    list.innerHTML = `<p class="text-muted">
                                                    No messages configured. Click “Add Message” to add your first message.
                                                </p>`;
                                                }
                                            });

                                        // Add Condition
                                        wrapper.querySelector('.addConditionBtn')
                                            .addEventListener('click', e => {
                                                e.preventDefault();
                                                const conds = wrapper.querySelector('.conditionsContainer');
                                                const cond = document.createElement('div');
                                                cond.className = 'mb-2 condition-group';
                                                cond.innerHTML = `
                                                <div class="row g-2 align-items-center">
                                                    <div class="col">
                                                    <input type="text" class="form-control form-control-sm" placeholder="Param">
                                                    </div>
                                                    <div class="col">
                                                    <select class="form-control form-control-sm">
                                                        <option value="eq">Equal (eq)</option>
                                                        <option value="neq">Not Equal (neq)</option>
                                                        <option value="gt">Greater Than (gt)</option>
                                                        <option value="gte">Greater Than or Equal (gte)</option>
                                                        <option value="lt">Less Than (lt)</option>
                                                        <option value="lte">Less Than or Equal (lte)</option>
                                                    </select>
                                                    </div>
                                                    <div class="col">
                                                    <input type="text" class="form-control form-control-sm" placeholder="Value">
                                                    </div>
                                                    <div class="col-auto">
                                                    <button type="button" class="btn btn-outline-danger btn-sm deleteConditionBtn">
                                                        Delete
                                                    </button>
                                                    </div>
                                                </div>
                                                `;
                                                conds.appendChild(cond);

                                                // wire up delete for this condition
                                                cond.querySelector('.deleteConditionBtn')
                                                    .addEventListener('click', e => {
                                                        e.preventDefault();
                                                        cond.remove();
                                                    });
                                            });
                                    }
                                })();
                            </script>


                            <!-- 8) Create Tool Button -->
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-success">Create Tool</button>
                            </div>
                        </form>
                        <script>
                            function collectKnowledgeBases() {
                                const kbList = [];

                                document.querySelectorAll('#kbList > div').forEach(kbDiv => {
                                    const name = kbDiv.querySelector('input[type="text"]').value;
                                    const description = kbDiv.querySelector('textarea').value;

                                    const fileIds = [];
                                    kbDiv.querySelectorAll('.fileIdsContainer input[type="text"]').forEach(fileInput => {
                                        if (fileInput.value.trim()) {
                                            fileIds.push(fileInput.value.trim());
                                        }
                                    });

                                    kbList.push({
                                        name,
                                        description,
                                        fileIds
                                    });
                                });

                                return kbList;
                            }

                            function collectMessages() {
                                const messages = [];
                                document.querySelectorAll('.message-group').forEach(wrapper => {
                                    const title = wrapper.querySelector('h5')?.textContent?.trim().toLowerCase();

                                    const typeMap = {
                                        "request start": "request-start",
                                        "request failed": "request-failed",
                                        "request complete": "request-complete",
                                        "request response delayed": "request-response-delayed"
                                    };

                                    const type = typeMap[title] ?? null;
                                    if (!type) return;

                                    const msg = {
                                        type
                                    };

                                    const textarea = wrapper.querySelector('textarea');
                                    if (textarea) {
                                        msg.content = textarea.value;
                                    }

                                    if (type === "request-response-delayed") {
                                        const timing = wrapper.querySelector('input[type="number"]')?.value;
                                        msg.timing = parseInt(timing) || 1000;
                                    }

                                    if (type === "request-start") {
                                        const waitInput = wrapper.querySelector('input[type="checkbox"]');
                                        if (waitInput?.checked) {
                                            msg.waitBeforeTrigger = true;
                                        }
                                    }

                                    const conditions = [];
                                    wrapper.querySelectorAll('.condition-group').forEach(cond => {
                                        const param = cond.querySelectorAll('input')[0]?.value;
                                        const operator = cond.querySelector('select')?.value;
                                        const value = cond.querySelectorAll('input')[1]?.value;
                                        if (param && operator && value) {
                                            conditions.push({
                                                param,
                                                operator,
                                                value
                                            });
                                        }
                                    });

                                    if (conditions.length > 0) {
                                        msg.conditions = conditions;
                                    }

                                    messages.push(msg);
                                });

                                return messages;
                            }
                        </script>

                        <script>
                            document.querySelector('form').addEventListener('submit', async function(e) {
                                e.preventDefault();

                                const toolName = document.getElementById('toolName').value;
                                const toolDesc = document.getElementById('toolDescription').value;
                                const knowledgeBases = collectKnowledgeBases();
                                const messageList = collectMessages();

                                const requestJson = {
                                    type: "query",
                                    async: false,
                                    function: {
                                        name: toolName,
                                        description: toolDesc,
                                        async: false,
                                        parameters: {
                                            type: "object",
                                            properties: Object.create(null), // ← this is key
                                            required: []
                                        }
                                    },
                                    knowledgeBases: knowledgeBases.map(kb => ({
                                        name: kb.name,
                                        description: kb.description,
                                        provider: "google",
                                        model: "gemini-1.5-flash",
                                        fileIds: kb.fileIds
                                    })),
                                    messages: messageList
                                };


                                console.log("Final payload to send:", JSON.stringify(requestJson, null, 2));

                                // Final payload into hidden input
                                document.getElementById('toolDataInput').value = JSON.stringify(requestJson);

                                // Submit the form
                                e.target.submit();
                            });
                        </script>

                        {{-- If the user clicked “Send Text” --}}
                    @elseif($tool === 'send-text')
                        <h4>Send Text</h4>
                        <form method="POST"
                            action="{{ route('tools.SendTextStore', ['type' => 'send_text', 'id' => $user_id ?? auth()->id()]) }}"
                            onsubmit="return prepareSendTextToolData();">
                            @csrf
                            <input type="hidden" name="tool_data" id="toolDataInput">

                            <!-- Tool Name -->
                            <div class="mb-3">
                                <label for="sendTextToolName" class="form-label">Tool Name</label>
                                <input type="text" id="sendTextToolName" class="form-control" value="send_text_tool"
                                    readonly>
                            </div>

                            <!-- Description -->
                            <div class="mb-3">
                                <label for="sendTextDescription" class="form-label">Description</label>
                                <textarea id="sendTextDescription" class="form-control" rows="3" placeholder="Describe the tool"></textarea>
                            </div>

                            <!-- From Phone Number -->
                            <div class="mb-3">
                                <label for="fromPhoneNumber" class="form-label">From Phone Number</label>
                                <select id="fromPhoneNumber" name="phone" class="form-select">
                                    <option value="">-- Select a Phone Number --</option>
                                    @foreach ($phone_numbers as $phone)
                                        <option value="{{ $phone->phone_number }}">{{ $phone->phone_number }}</option>
                                    @endforeach
                                </select>
                            </div>


                            <!-- 4) Messages Section -->
                            <div class="mb-3">
                                <div class="mb-3 d-flex align-items-center justify-content-between">
                                    <div class="form-label">Messages</div>
                                    <!-- dropdown-toggle button -->
                                    <button type="button" id="addMessageButton"
                                        class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        + Add Message
                                    </button>
                                    <!-- dropdown menu -->
                                    <ul class="dropdown-menu" id="messageTypeMenu">
                                        <li><a class="dropdown-item" href="#" data-type="start">Request Start</a>
                                        </li>
                                        <li><a class="dropdown-item" href="#" data-type="complete">Request
                                                Complete</a></li>
                                        <li><a class="dropdown-item" href="#" data-type="failed">Request Failed</a>
                                        </li>
                                        <li><a class="dropdown-item" href="#" data-type="delayed">Request Response
                                                Delayed</a></li>
                                    </ul>
                                </div>

                                <div id="messageList" class="border rounded p-2 mb-2" style="min-height: 100px;">
                                    <p class="text-muted">
                                        No messages configured. Click “Add Message” to add your first message.
                                    </p>
                                </div>
                            </div>

                            <script>
                                (function() {
                                    let messageCount = 0;
                                    const menu = document.getElementById('messageTypeMenu');
                                    const list = document.getElementById('messageList');

                                    // 1) Hook up the dropdown items
                                    menu.querySelectorAll('.dropdown-item').forEach(item => {
                                        item.addEventListener('click', e => {
                                            e.preventDefault();
                                            const type = item.dataset.type;
                                            addMessageForm(type);
                                        });
                                    });

                                    // 2) Build + append the selected form
                                    function addMessageForm(type) {
                                        messageCount++;
                                        const id = messageCount;

                                        // remove placeholder text
                                        const placeholder = list.querySelector('.text-muted');
                                        if (placeholder) placeholder.remove();

                                        // wrapper for the new form
                                        const wrapper = document.createElement('div');
                                        wrapper.className = 'border rounded p-3 mb-3 message-group';

                                        // form HTML per type
                                        let html = '';
                                        switch (type) {
                                            case 'start':
                                                html = `
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <h5 class="mb-0">Request Start</h5>
                                                    <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                                </div>
                                                <div class="mb-2">
                                                    <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="msgType${id}" id="default${id}" checked>
                                                    <label class="form-check-label" for="default${id}">
                                                        Default (server will use default message)
                                                    </label>
                                                    </div>
                                                    <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="msgType${id}" id="none${id}">
                                                    <label class="form-check-label" for="none${id}">
                                                        None (no message will be spoken)
                                                    </label>
                                                    </div>
                                                    <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="msgType${id}" id="custom${id}">
                                                    <label class="form-check-label" for="custom${id}">Custom</label>
                                                    </div>
                                                </div>
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="wait${id}">
                                                    <label class="form-check-label" for="wait${id}">
                                                    Wait for message to be spoken before triggering tool call
                                                    </label>
                                                </div>
                                                <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                                <div class="conditionsContainer"></div>
                                                `;
                                                break;

                                            case 'complete':
                                                html = `
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <h5 class="mb-0">Request Complete</h5>
                                                    <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                                </div>
                                                <div class="mb-2">
                                                    <textarea class="form-control mb-2" rows="2" placeholder="Enter message content…"></textarea>
                                                </div>
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="end${id}">
                                                    <label class="form-check-label" for="end${id}">
                                                    End the call after message is spoken
                                                    </label>
                                                </div>
                                                <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                                <div class="conditionsContainer"></div>
                                                `;
                                                break;

                                            case 'failed':
                                                html = `
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <h5 class="mb-0">Request Failed</h5>
                                                    <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                                </div>
                                                <div class="mb-2">
                                                    <textarea class="form-control mb-2" rows="2" placeholder="Enter message content…"></textarea>
                                                </div>
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="endFail${id}">
                                                    <label class="form-check-label" for="endFail${id}">
                                                    End the call after message is spoken
                                                    </label>
                                                </div>
                                                <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                                <div class="conditionsContainer"></div>
                                                `;
                                                break;

                                            case 'delayed':
                                                html = `
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <h5 class="mb-0">Request Response Delayed</h5>
                                                    <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                                </div>
                                                <div class="mb-2">
                                                    <textarea class="form-control mb-2" rows="2" placeholder="Enter message content…"></textarea>
                                                </div>
                                                <div class="mb-2">
                                                    <label class="form-label" for="timing${id}">Timing (milliseconds)</label>
                                                    <input type="number" id="timing${id}" class="form-control mb-2" value="1000">
                                                </div>
                                                <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                                <div class="conditionsContainer"></div>
                                                `;
                                                break;
                                        }

                                        wrapper.innerHTML = html;
                                        list.appendChild(wrapper);

                                        // Delete message
                                        wrapper.querySelector('.deleteMessageBtn')
                                            .addEventListener('click', () => {
                                                wrapper.remove();
                                                // if none left, restore placeholder
                                                if (!list.querySelector('.message-group')) {
                                                    list.innerHTML = `<p class="text-muted">
                                                    No messages configured. Click “Add Message” to add your first message.
                                                </p>`;
                                                }
                                            });

                                        // Add Condition
                                        wrapper.querySelector('.addConditionBtn')
                                            .addEventListener('click', e => {
                                                e.preventDefault();
                                                const conds = wrapper.querySelector('.conditionsContainer');
                                                const cond = document.createElement('div');
                                                cond.className = 'mb-2 condition-group';
                                                cond.innerHTML = `
                                                <div class="row g-2 align-items-center">
                                                    <div class="col">
                                                    <input type="text" class="form-control form-control-sm" placeholder="Param">
                                                    </div>
                                                    <div class="col">
                                                    <select class="form-control form-control-sm">
                                                        <option value="eq">Equal (eq)</option>
                                                        <option value="neq">Not Equal (neq)</option>
                                                        <option value="gt">Greater Than (gt)</option>
                                                        <option value="gte">Greater Than or Equal (gte)</option>
                                                        <option value="lt">Less Than (lt)</option>
                                                        <option value="lte">Less Than or Equal (lte)</option>
                                                    </select>
                                                    </div>
                                                    <div class="col">
                                                    <input type="text" class="form-control form-control-sm" placeholder="Value">
                                                    </div>
                                                    <div class="col-auto">
                                                    <button type="button" class="btn btn-outline-danger btn-sm deleteConditionBtn">
                                                        Delete
                                                    </button>
                                                    </div>
                                                </div>
                                                `;
                                                conds.appendChild(cond);

                                                // wire up delete for this condition
                                                cond.querySelector('.deleteConditionBtn')
                                                    .addEventListener('click', e => {
                                                        e.preventDefault();
                                                        cond.remove();
                                                    });
                                            });
                                    }
                                })();
                            </script>

                            <!-- 5) Create Tool & Close Buttons -->
                            <div class="d-flex justify-content-end mt-4">
                                <button type="submit" class="btn btn-primary">Create Tool</button>
                                <button type="button" class="btn btn-secondary ms-2">Close</button>
                            </div>
                        </form>

                        <script>
                            function prepareSendTextToolData() {
                                const userId = `{{ $user_id ?? auth()->id() }}`;

                                const tool = {
                                    type: "function",
                                    phone: document.getElementById('fromPhoneNumber').value,
                                    function: {
                                        name: document.getElementById('sendTextToolName').value,
                                        description: document.getElementById('sendTextDescription').value,
                                        async: false,
                                        parameters: {
                                            type: "object",
                                            properties: {
                                                Name: {
                                                    type: "string",
                                                    description: "Name"
                                                },
                                                Phone: {
                                                    type: "string",
                                                    description: "Phone"
                                                },
                                                SMS: {
                                                    type: "string",
                                                    description: "SMS Content"
                                                }
                                            },
                                            required: ["Name", "Phone", "SMS"]
                                        }
                                    },
                                    messages: [], // <-- we'll fill this below
                                    server: {
                                        url: `https://ithinqai-admin.ithinq.ai/api/tool_webhook_sendtext?userID=${userId}`
                                    },
                                    orgId: `{{ $user->org_id }}`
                                };

                                // Collect all messages from messageList
                                const messageGroups = document.querySelectorAll('.message-group');
                                messageGroups.forEach(group => {
                                    const title = group.querySelector('h5')?.innerText?.trim();
                                    const type = title?.toLowerCase().replace(/\s+/g,
                                        '_'); // e.g., "Request Complete" => "request_complete"

                                    const textarea = group.querySelector('textarea');
                                    const content = textarea ? textarea.value.trim() : null;

                                    const waitCheckbox = group.querySelector('input[id^=wait]');
                                    const endCheckbox = group.querySelector('input[id^=end]');
                                    const endFailCheckbox = group.querySelector('input[id^=endFail]');
                                    const timingInput = group.querySelector('input[id^=timing]');

                                    // Add conditions
                                    const conditions = [];
                                    group.querySelectorAll('.condition-group').forEach(cond => {
                                        const param = cond.querySelector('input[placeholder="Param"]').value.trim();
                                        const op = cond.querySelector('select').value;
                                        const value = cond.querySelector('input[placeholder="Value"]').value.trim();

                                        if (param && value) {
                                            conditions.push({
                                                param,
                                                op,
                                                value
                                            });
                                        }
                                    });

                                    const messageObj = {
                                        type: type,
                                        content: content,
                                        wait: waitCheckbox?.checked || false,
                                        end: endCheckbox?.checked || endFailCheckbox?.checked || false,
                                        timing: timingInput ? parseInt(timingInput.value) || 1000 : undefined,
                                        conditions: conditions
                                    };

                                    // Remove empty/null fields
                                    Object.keys(messageObj).forEach(key => {
                                        if (
                                            messageObj[key] === undefined ||
                                            messageObj[key] === null ||
                                            (Array.isArray(messageObj[key]) && messageObj[key].length === 0) ||
                                            messageObj[key] === ''
                                        ) {
                                            delete messageObj[key];
                                        }
                                    });

                                    tool.messages.push(messageObj);
                                });

                                // Final JSON
                                document.getElementById('toolDataInput').value = JSON.stringify(tool);
                                return true;
                            }
                        </script>




                        {{-- If the user clicked “DTMF” --}}
                    @elseif($tool === 'dtmf')
                        <h4>DTMF Tool</h4>
                        <form>
                            <!-- 1) Tool Name (prefilled) -->
                            <div class="mb-3">
                                <label for="dtmfToolName" class="form-label">Tool Name</label>
                                <input type="text" id="dtmfToolName" class="form-control" value="dtmf_tool" readonly>
                            </div>

                            <!-- 2) Description -->
                            <div class="mb-3">
                                <label for="dtmfDescription" class="form-label">Description</label>
                                <textarea id="dtmfDescription" class="form-control" rows="3"
                                    placeholder="Describe the tool in a few sentences"></textarea>
                            </div>

                            <!-- 3) Parameters Section -->
                            <h5 class="mt-4">Parameters</h5>
                            <div class="mb-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <label class="form-label mb-0">Parameters</label>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="addPropertyBtn">+
                                        Add Property</button>
                                </div>
                                <div id="endCallParamList" class="border rounded p-2 mt-2" style="min-height: 100px;">
                                    <p class="text-muted mb-0">No properties configured. Click “Add Property” to add your
                                        first property.</p>
                                </div>
                            </div>

                            <script>
                                document.getElementById('addPropertyBtn').addEventListener('click', function() {
                                    // Get the container where the new property form will be added
                                    var container = document.getElementById('endCallParamList');

                                    // Create a new property form structure
                                    var newPropertyGroup = document.createElement('div');
                                    newPropertyGroup.classList.add('property-group', 'border', 'rounded', 'p-3', 'mb-3', 'bg-light');

                                    newPropertyGroup.innerHTML = `
                                        <div class="mb-2">
                                            <label for="paramName">Name</label>
                                            <input type="text" class="form-control" id="paramName" placeholder="Name">
                                        </div>

                                        <div class="mb-2">
                                            <label for="paramDesc">Description</label>
                                            <input type="text" class="form-control" id="paramDesc" placeholder="Description">
                                        </div>

                                        <div class="mb-2">
                                            <label for="paramValues">Enum Values</label>
                                            <input type="text" class="form-control" id="paramValues" placeholder="Value">
                                        </div>

                                        <div class="mb-2">
                                            <label for="paramRequired">
                                                <input type="checkbox" id="paramRequired"> Required
                                            </label>
                                        </div>
                                        
                                        <!-- Delete Button for Property -->
                                        <button type="button" class="btn btn-outline-danger deletePropertyBtn">Delete</button>
                                    `;

                                    // Append the new property group to the container
                                    container.appendChild(newPropertyGroup);

                                    // Add delete button functionality
                                    var deleteButton = newPropertyGroup.querySelector('.deletePropertyBtn');
                                    deleteButton.addEventListener('click', function() {
                                        // Remove the property group (form)
                                        newPropertyGroup.remove();
                                    });
                                });
                            </script>

                            <!-- 4) Messages Section -->
                            <div class="mb-3">
                                <div class="mb-3 d-flex align-items-center justify-content-between">
                                    <div class="form-label">Messages</div>
                                    <!-- dropdown-toggle button -->
                                    <button type="button" id="addMessageButton"
                                        class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        + Add Message
                                    </button>
                                    <!-- dropdown menu -->
                                    <ul class="dropdown-menu" id="messageTypeMenu">
                                        <li><a class="dropdown-item" href="#" data-type="start">Request Start</a>
                                        </li>
                                        <li><a class="dropdown-item" href="#" data-type="complete">Request
                                                Complete</a></li>
                                        <li><a class="dropdown-item" href="#" data-type="failed">Request Failed</a>
                                        </li>
                                        <li><a class="dropdown-item" href="#" data-type="delayed">Request Response
                                                Delayed</a></li>
                                    </ul>
                                </div>

                                <div id="messageList" class="border rounded p-2 mb-2" style="min-height: 100px;">
                                    <p class="text-muted">
                                        No messages configured. Click “Add Message” to add your first message.
                                    </p>
                                </div>
                            </div>

                            <script>
                                (function() {
                                    let messageCount = 0;
                                    const menu = document.getElementById('messageTypeMenu');
                                    const list = document.getElementById('messageList');

                                    // 1) Hook up the dropdown items
                                    menu.querySelectorAll('.dropdown-item').forEach(item => {
                                        item.addEventListener('click', e => {
                                            e.preventDefault();
                                            const type = item.dataset.type;
                                            addMessageForm(type);
                                        });
                                    });

                                    // 2) Build + append the selected form
                                    function addMessageForm(type) {
                                        messageCount++;
                                        const id = messageCount;

                                        // remove placeholder text
                                        const placeholder = list.querySelector('.text-muted');
                                        if (placeholder) placeholder.remove();

                                        // wrapper for the new form
                                        const wrapper = document.createElement('div');
                                        wrapper.className = 'border rounded p-3 mb-3 message-group';

                                        // form HTML per type
                                        let html = '';
                                        switch (type) {
                                            case 'start':
                                                html = `
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <h5 class="mb-0">Request Start</h5>
                                            <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                        </div>
                                        <div class="mb-2">
                                            <div class="form-check">
                                            <input class="form-check-input" type="radio" name="msgType${id}" id="default${id}" checked>
                                            <label class="form-check-label" for="default${id}">
                                                Default (server will use default message)
                                            </label>
                                            </div>
                                            <div class="form-check">
                                            <input class="form-check-input" type="radio" name="msgType${id}" id="none${id}">
                                            <label class="form-check-label" for="none${id}">
                                                None (no message will be spoken)
                                            </label>
                                            </div>
                                            <div class="form-check">
                                            <input class="form-check-input" type="radio" name="msgType${id}" id="custom${id}">
                                            <label class="form-check-label" for="custom${id}">Custom</label>
                                            </div>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="wait${id}">
                                            <label class="form-check-label" for="wait${id}">
                                            Wait for message to be spoken before triggering tool call
                                            </label>
                                        </div>
                                        <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                        <div class="conditionsContainer"></div>
                                        `;
                                                break;

                                            case 'complete':
                                                html = `
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <h5 class="mb-0">Request Complete</h5>
                                            <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                        </div>
                                        <div class="mb-2">
                                            <textarea class="form-control mb-2" rows="2" placeholder="Enter message content…"></textarea>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="end${id}">
                                            <label class="form-check-label" for="end${id}">
                                            End the call after message is spoken
                                            </label>
                                        </div>
                                        <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                        <div class="conditionsContainer"></div>
                                        `;
                                                break;

                                            case 'failed':
                                                html = `
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <h5 class="mb-0">Request Failed</h5>
                                            <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                        </div>
                                        <div class="mb-2">
                                            <textarea class="form-control mb-2" rows="2" placeholder="Enter message content…"></textarea>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="endFail${id}">
                                            <label class="form-check-label" for="endFail${id}">
                                            End the call after message is spoken
                                            </label>
                                        </div>
                                        <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                        <div class="conditionsContainer"></div>
                                        `;
                                                break;

                                            case 'delayed':
                                                html = `
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <h5 class="mb-0">Request Response Delayed</h5>
                                            <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                        </div>
                                        <div class="mb-2">
                                            <textarea class="form-control mb-2" rows="2" placeholder="Enter message content…"></textarea>
                                        </div>
                                        <div class="mb-2">
                                            <label class="form-label" for="timing${id}">Timing (milliseconds)</label>
                                            <input type="number" id="timing${id}" class="form-control mb-2" value="1000">
                                        </div>
                                        <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                        <div class="conditionsContainer"></div>
                                        `;
                                                break;
                                        }

                                        wrapper.innerHTML = html;
                                        list.appendChild(wrapper);

                                        // Delete message
                                        wrapper.querySelector('.deleteMessageBtn')
                                            .addEventListener('click', () => {
                                                wrapper.remove();
                                                // if none left, restore placeholder
                                                if (!list.querySelector('.message-group')) {
                                                    list.innerHTML = `<p class="text-muted">
                                            No messages configured. Click “Add Message” to add your first message.
                                        </p>`;
                                                }
                                            });

                                        // Add Condition
                                        wrapper.querySelector('.addConditionBtn')
                                            .addEventListener('click', e => {
                                                e.preventDefault();
                                                const conds = wrapper.querySelector('.conditionsContainer');
                                                const cond = document.createElement('div');
                                                cond.className = 'mb-2 condition-group';
                                                cond.innerHTML = `
                                        <div class="row g-2 align-items-center">
                                            <div class="col">
                                            <input type="text" class="form-control form-control-sm" placeholder="Param">
                                            </div>
                                            <div class="col">
                                            <select class="form-control form-control-sm">
                                                <option>Equal (eq)</option>
                                                <option>Not Equal (neq)</option>
                                                <option>Greater Than (gt)</option>
                                                <option>Greater Than or Equal (gte)</option>
                                                <option>Less Than (lt)</option>
                                                <option>Less Than or Equal (lte)</option>
                                            </select>
                                            </div>
                                            <div class="col">
                                            <input type="text" class="form-control form-control-sm" placeholder="Value">
                                            </div>
                                            <div class="col-auto">
                                            <button type="button" class="btn btn-outline-danger btn-sm deleteConditionBtn">
                                                Delete
                                            </button>
                                            </div>
                                        </div>
                                        `;
                                                conds.appendChild(cond);

                                                // wire up delete for this condition
                                                cond.querySelector('.deleteConditionBtn')
                                                    .addEventListener('click', e => {
                                                        e.preventDefault();
                                                        cond.remove();
                                                    });
                                            });
                                    }
                                })();
                            </script>

                            <!-- 5) Create Tool & Close Buttons -->
                            <div class="d-flex justify-content-end mt-4">
                                <button type="submit" class="btn btn-primary">Create Tool</button>
                                <button type="button" class="btn btn-secondary ms-2">Close</button>
                            </div>
                        </form>


                        {{-- If the user clicked “End Call” --}}
                    @elseif($tool === 'end-call')
                        <h4>End Call</h4>
                        <form>
                            <!-- 1) Tool Name (prefilled) -->
                            <div class="mb-3">
                                <label for="endCallToolName" class="form-label">Tool Name</label>
                                <input type="text" id="endCallToolName" class="form-control" value="end_call_tool"
                                    readonly>
                            </div>

                            <!-- 2) Description -->
                            <div class="mb-3">
                                <label for="endCallDescription" class="form-label">Description</label>
                                <textarea id="endCallDescription" class="form-control" rows="3"
                                    placeholder="Describe the tool in a few sentences"></textarea>
                            </div>

                            <!-- 3) Parameters Section -->
                            <h5 class="mt-4">Parameters</h5>
                            <div class="mb-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <label class="form-label mb-0">Parameters</label>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="addPropertyBtn">+
                                        Add Property</button>
                                </div>
                                <div id="endCallParamList" class="border rounded p-2 mt-2" style="min-height: 100px;">
                                    <p class="text-muted mb-0">No properties configured. Click “Add Property” to add your
                                        first property.</p>
                                </div>
                            </div>

                            <script>
                                document.getElementById('addPropertyBtn').addEventListener('click', function() {
                                    // Get the container where the new property form will be added
                                    var container = document.getElementById('endCallParamList');

                                    // Create a new property form structure
                                    var newPropertyGroup = document.createElement('div');
                                    newPropertyGroup.classList.add('property-group', 'border', 'rounded', 'p-3', 'mb-3', 'bg-light');

                                    newPropertyGroup.innerHTML = `
                                        <div class="mb-2">
                                            <label for="paramName">Name</label>
                                            <input type="text" class="form-control" id="paramName" placeholder="Name">
                                        </div>

                                        <div class="mb-2">
                                            <label for="paramDesc">Description</label>
                                            <input type="text" class="form-control" id="paramDesc" placeholder="Description">
                                        </div>

                                        <div class="mb-2">
                                            <label for="paramValues">Enum Values</label>
                                            <input type="text" class="form-control" id="paramValues" placeholder="Value">
                                        </div>

                                        <div class="mb-2">
                                            <label for="paramRequired">
                                                <input type="checkbox" id="paramRequired"> Required
                                            </label>
                                        </div>
                                        
                                        <!-- Delete Button for Property -->
                                        <button type="button" class="btn btn-outline-danger deletePropertyBtn">Delete</button>
                                    `;

                                    // Append the new property group to the container
                                    container.appendChild(newPropertyGroup);

                                    // Add delete button functionality
                                    var deleteButton = newPropertyGroup.querySelector('.deletePropertyBtn');
                                    deleteButton.addEventListener('click', function() {
                                        // Remove the property group (form)
                                        newPropertyGroup.remove();
                                    });
                                });
                            </script>


                            <!-- 4) Messages Section -->
                            <div class="mb-3">
                                <div class="mb-3 d-flex align-items-center justify-content-between">
                                    <div class="form-label">Messages</div>
                                    <!-- dropdown-toggle button -->
                                    <button type="button" id="addMessageButton"
                                        class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        + Add Message
                                    </button>
                                    <!-- dropdown menu -->
                                    <ul class="dropdown-menu" id="messageTypeMenu">
                                        <li><a class="dropdown-item" href="#" data-type="start">Request Start</a>
                                        </li>
                                        <li><a class="dropdown-item" href="#" data-type="complete">Request
                                                Complete</a></li>
                                        <li><a class="dropdown-item" href="#" data-type="failed">Request Failed</a>
                                        </li>
                                        <li><a class="dropdown-item" href="#" data-type="delayed">Request Response
                                                Delayed</a></li>
                                    </ul>
                                </div>

                                <div id="messageList" class="border rounded p-2 mb-2" style="min-height: 100px;">
                                    <p class="text-muted">
                                        No messages configured. Click “Add Message” to add your first message.
                                    </p>
                                </div>
                            </div>

                            <script>
                                (function() {
                                    let messageCount = 0;
                                    const menu = document.getElementById('messageTypeMenu');
                                    const list = document.getElementById('messageList');

                                    // 1) Hook up the dropdown items
                                    menu.querySelectorAll('.dropdown-item').forEach(item => {
                                        item.addEventListener('click', e => {
                                            e.preventDefault();
                                            const type = item.dataset.type;
                                            addMessageForm(type);
                                        });
                                    });

                                    // 2) Build + append the selected form
                                    function addMessageForm(type) {
                                        messageCount++;
                                        const id = messageCount;

                                        // remove placeholder text
                                        const placeholder = list.querySelector('.text-muted');
                                        if (placeholder) placeholder.remove();

                                        // wrapper for the new form
                                        const wrapper = document.createElement('div');
                                        wrapper.className = 'border rounded p-3 mb-3 message-group';

                                        // form HTML per type
                                        let html = '';
                                        switch (type) {
                                            case 'start':
                                                html = `
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <h5 class="mb-0">Request Start</h5>
                                            <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                        </div>
                                        <div class="mb-2">
                                            <div class="form-check">
                                            <input class="form-check-input" type="radio" name="msgType${id}" id="default${id}" checked>
                                            <label class="form-check-label" for="default${id}">
                                                Default (server will use default message)
                                            </label>
                                            </div>
                                            <div class="form-check">
                                            <input class="form-check-input" type="radio" name="msgType${id}" id="none${id}">
                                            <label class="form-check-label" for="none${id}">
                                                None (no message will be spoken)
                                            </label>
                                            </div>
                                            <div class="form-check">
                                            <input class="form-check-input" type="radio" name="msgType${id}" id="custom${id}">
                                            <label class="form-check-label" for="custom${id}">Custom</label>
                                            </div>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="wait${id}">
                                            <label class="form-check-label" for="wait${id}">
                                            Wait for message to be spoken before triggering tool call
                                            </label>
                                        </div>
                                        <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                        <div class="conditionsContainer"></div>
                                        `;
                                                break;

                                            case 'complete':
                                                html = `
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <h5 class="mb-0">Request Complete</h5>
                                            <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                        </div>
                                        <div class="mb-2">
                                            <textarea class="form-control mb-2" rows="2" placeholder="Enter message content…"></textarea>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="end${id}">
                                            <label class="form-check-label" for="end${id}">
                                            End the call after message is spoken
                                            </label>
                                        </div>
                                        <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                        <div class="conditionsContainer"></div>
                                        `;
                                                break;

                                            case 'failed':
                                                html = `
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <h5 class="mb-0">Request Failed</h5>
                                            <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                        </div>
                                        <div class="mb-2">
                                            <textarea class="form-control mb-2" rows="2" placeholder="Enter message content…"></textarea>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="endFail${id}">
                                            <label class="form-check-label" for="endFail${id}">
                                            End the call after message is spoken
                                            </label>
                                        </div>
                                        <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                        <div class="conditionsContainer"></div>
                                        `;
                                                break;

                                            case 'delayed':
                                                html = `
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <h5 class="mb-0">Request Response Delayed</h5>
                                            <button type="button" class="btn btn-outline-danger btn-sm deleteMessageBtn">Delete</button>
                                        </div>
                                        <div class="mb-2">
                                            <textarea class="form-control mb-2" rows="2" placeholder="Enter message content…"></textarea>
                                        </div>
                                        <div class="mb-2">
                                            <label class="form-label" for="timing${id}">Timing (milliseconds)</label>
                                            <input type="number" id="timing${id}" class="form-control mb-2" value="1000">
                                        </div>
                                        <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                        <div class="conditionsContainer"></div>
                                        `;
                                                break;
                                        }

                                        wrapper.innerHTML = html;
                                        list.appendChild(wrapper);

                                        // Delete message
                                        wrapper.querySelector('.deleteMessageBtn')
                                            .addEventListener('click', () => {
                                                wrapper.remove();
                                                // if none left, restore placeholder
                                                if (!list.querySelector('.message-group')) {
                                                    list.innerHTML = `<p class="text-muted">
                                            No messages configured. Click “Add Message” to add your first message.
                                        </p>`;
                                                }
                                            });

                                        // Add Condition
                                        wrapper.querySelector('.addConditionBtn')
                                            .addEventListener('click', e => {
                                                e.preventDefault();
                                                const conds = wrapper.querySelector('.conditionsContainer');
                                                const cond = document.createElement('div');
                                                cond.className = 'mb-2 condition-group';
                                                cond.innerHTML = `
                                        <div class="row g-2 align-items-center">
                                            <div class="col">
                                            <input type="text" class="form-control form-control-sm" placeholder="Param">
                                            </div>
                                            <div class="col">
                                            <select class="form-control form-control-sm">
                                                <option>Equal (eq)</option>
                                                <option>Not Equal (neq)</option>
                                                <option>Greater Than (gt)</option>
                                                <option>Greater Than or Equal (gte)</option>
                                                <option>Less Than (lt)</option>
                                                <option>Less Than or Equal (lte)</option>
                                            </select>
                                            </div>
                                            <div class="col">
                                            <input type="text" class="form-control form-control-sm" placeholder="Value">
                                            </div>
                                            <div class="col-auto">
                                            <button type="button" class="btn btn-outline-danger btn-sm deleteConditionBtn">
                                                Delete
                                            </button>
                                            </div>
                                        </div>
                                        `;
                                                conds.appendChild(cond);

                                                // wire up delete for this condition
                                                cond.querySelector('.deleteConditionBtn')
                                                    .addEventListener('click', e => {
                                                        e.preventDefault();
                                                        cond.remove();
                                                    });
                                            });
                                    }
                                })();
                            </script>

                            <!-- 5) Create Tool & Close Buttons -->
                            <div class="d-flex justify-content-end mt-4">
                                <button type="submit" class="btn btn-primary">Create Tool</button>
                                <button type="button" class="btn btn-secondary ms-2">Close</button>
                            </div>
                        </form>
                    @else
                        <div class="alert alert-warning">
                            <strong>Unknown tool:</strong> “{{ $tool }}”.<br>
                            Please pick a valid tool from the dropdown.
                        </div>
                    @endif

                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
@endsection