@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">Update 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['type'] === 'transferCall')
                        <h4>Update TransferCall Tool</h4>
                        <form method="POST" action="{{ route('tools.updateTransferCall', [$user->id]) }}">
                            @csrf
                            @method('PATCH')

                            {{-- Type (read‐only or hidden) --}}
                            <div class="mb-3">
                                <label for="toolType" class="form-label">Type</label>
                                <input type="text" id="toolType" class="form-control" value="{{ $toolData['type'] }}"
                                    readonly>
                            </div>
                            @if (isset($toolData['id']))
                                <input type="hidden" name="tool_id" value="{{ $toolData['id'] }}">
                            @endif
                            <div class="mb-3">
                                <label class="form-label">Destinations</label>
                                <div id="destinations-container">
                                    @if (!empty($toolData['destinations']) && is_array($toolData['destinations']))
                                        @foreach ($toolData['destinations'] as $index => $destination)
                                            <div class="destination-group border rounded p-3 mb-3 bg-light">
                                                <div class="mb-2">
                                                    <label>Type</label>
                                                    <input type="text" name="destinations[{{ $index }}][type]"
                                                        class="form-control" value="{{ $destination['type'] ?? '' }}">
                                                </div>
                                                <div class="mb-2">
                                                    <label>Number</label>
                                                    {{-- <input type="text" name="destinations[{{ $index }}][number]"
                                                        class="form-control" value="{{ $destination['number'] ?? '' }}"> --}}
                                                    <input type="text" class="form-control"
                                                        name="destinations[{{ $index }}][value]"
                                                        value="{{ $destination['number'] ?? '' }}">

                                                </div>
                                                <div class="mb-2">
                                                    <label>Message</label>
                                                    <input type="text" name="destinations[{{ $index }}][message]"
                                                        class="form-control" value="{{ $destination['message'] ?? '' }}">
                                                </div>

                                                <button type="button"
                                                    class="btn btn-outline-danger btn-sm remove-destination mt-2">Remove</button>
                                            </div>
                                        @endforeach
                                    @else
                                        <p>No destinations added. Click “Add Destination” to start.</p>
                                    @endif
                                </div>

                                <button type="button" id="add-destination" class="btn btn-outline-primary mt-2">Add
                                    Destination</button>
                            </div>

                            {{-- Function Section: Name, Description, Destination Type, Destination Description --}}
                            <h5 class="mt-4">Function</h5>
                            <div class="mb-3">
                                <label for="funcName" class="form-label">Name</label>
                                <input type="text" id="funcName" name="funcName" class="form-control"
                                    value="{{ $toolData['function']['name'] ?? '' }}" placeholder="Enter Tool Name">
                            </div>

                            <div class="mb-3">
                                <label for="funcDescription" class="form-label">Description</label>
                                <textarea id="funcDescription" name="function[description]" class="form-control" rows="2"
                                    placeholder="Enter Description">{{ $toolData['function']['description'] ?? '' }}</textarea>
                            </div>

                            <div class="mb-3">
                                <label for="destinationType" class="form-label">Destination Type</label>
                                <input type="text" id="destinationType" name="destination_type" class="form-control"
                                    value="{{ $toolData['destination_type'] ?? '' }}">
                            </div>

                            <div class="mb-3">
                                <label for="destinationDescription" class="form-label">Destination Description</label>
                                <textarea id="destinationDescription" name="destination_description" class="form-control" rows="2">{{ $toolData['destination_description'] ?? '' }}</textarea>

                            </div>

                            <h5 class="mt-4">Messages</h5>
                            <div id="messagesContainer">
                                @if (!empty($toolData['messages']) && is_array($toolData['messages']))
                                    @foreach ($toolData['messages'] as $index => $message)
                                        @php
                                            $condition = $message['conditions'][0] ?? [];
                                        @endphp

                                        <div class="card p-3 mb-3 message-group">
                                            <div class="mb-2">
                                                <label class="form-label">Message Type</label>
                                                <select class="form-control" name="messages[{{ $index }}][type]">
                                                    <option value="request-start"
                                                        {{ ($message['type'] ?? '') === 'request-start' ? 'selected' : '' }}>
                                                        Request Start</option>
                                                    <option value="request-failed"
                                                        {{ ($message['type'] ?? '') === 'request-failed' ? 'selected' : '' }}>
                                                        Request Failed</option>
                                                    <option value="request-complete"
                                                        {{ ($message['type'] ?? '') === 'request-complete' ? 'selected' : '' }}>
                                                        Request Complete</option>
                                                    <option value="request-response-delayed"
                                                        {{ ($message['type'] ?? '') === 'request-response-delayed' ? 'selected' : '' }}>
                                                        Request Response Delayed</option>
                                                </select>
                                            </div>

                                            <div class="mb-2">
                                                <label class="form-label">Message Content</label>
                                                <textarea name="messages[{{ $index }}][content]" class="form-control" rows="2"
                                                    placeholder="Enter message content">{{ $message['content'] ?? '' }}</textarea>
                                            </div>

                                            <div class="mb-2">
                                                <label class="form-label">Condition</label>
                                                <div class="row">
                                                    <div class="col">
                                                        <input type="text"
                                                            name="messages[{{ $index }}][condition_param]"
                                                            class="form-control" placeholder="Param"
                                                            value="{{ $condition['param'] ?? '' }}">
                                                    </div>
                                                    <div class="col">
                                                        <select name="messages[{{ $index }}][condition_operator]"
                                                            class="form-control">
                                                            <option value="eq"
                                                                {{ ($condition['operator'] ?? '') === 'eq' ? 'selected' : '' }}>
                                                                Equal (eq)</option>
                                                            <option value="neq"
                                                                {{ ($condition['operator'] ?? '') === 'neq' ? 'selected' : '' }}>
                                                                Not Equal (neq)</option>
                                                            <option value="gt"
                                                                {{ ($condition['operator'] ?? '') === 'gt' ? 'selected' : '' }}>
                                                                Greater Than (gt)</option>
                                                            <option value="gte"
                                                                {{ ($condition['operator'] ?? '') === 'gte' ? 'selected' : '' }}>
                                                                Greater Than or Equal (gte)</option>
                                                            <option value="lt"
                                                                {{ ($condition['operator'] ?? '') === 'lt' ? 'selected' : '' }}>
                                                                Less Than (lt)</option>
                                                            <option value="lte"
                                                                {{ ($condition['operator'] ?? '') === 'lte' ? 'selected' : '' }}>
                                                                Less Than or Equal (lte)</option>
                                                        </select>
                                                    </div>
                                                    <div class="col">
                                                        <input type="text"
                                                            name="messages[{{ $index }}][condition_value]"
                                                            class="form-control" placeholder="Value"
                                                            value="{{ $condition['value'] ?? '' }}">
                                                    </div>
                                                </div>
                                            </div>

                                            <button type="button"
                                                class="btn btn-outline-danger btn-sm mt-2 remove-message">Remove</button>
                                        </div>
                                    @endforeach
                                @endif


                            </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> Update Tool
                                </button>
                            </div>

                        </form>

                        <script>
                            document.addEventListener('DOMContentLoaded', function() {
                                let destinationIndex = {{ count($toolData['destinations'] ?? []) }};
                                let messageIndex = {{ count($toolData['messages'] ?? []) }};

                                // Add Destination
                                document.getElementById('add-destination').addEventListener('click', function() {
                                    const container = document.getElementById('destinations-container');
                                    const html = `
                                                <div class="destination-group border rounded p-3 mb-3 bg-light">
                                                    <div class="mb-2">
                                                        <label>Type</label>
                                                        <input type="text" name="destinations[${destinationIndex}][type]" value="number" class="form-control">
                                                    </div>
                                                    <div class="mb-2">
                                                        <label>Value</label>
                                                        <input type="text" name="destinations[${destinationIndex}][value]" value="+15618236919" class="form-control">
                                                    </div>
                                                    <div class="mb-2">
                                                        <label>Message</label>
                                                        <input type="text" name="destinations[${destinationIndex}][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 btn-sm remove-destination mt-2">Remove</button>
                                                </div>
                                            `;


                                    container.insertAdjacentHTML('beforeend', html);
                                    destinationIndex++;
                                });

                                // Add Message with Condition
                                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" name="messages[${messageIndex}][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 name="messages[${messageIndex}][content]" class="form-control" rows="2"
                                                                placeholder="Enter message content"></textarea>
                                                        </div>
                                                        <div class="mb-2">
                                                            <label class="form-label">Condition</label>
                                                            <div class="row">
                                                                <div class="col">
                                                                    <input type="text" name="messages[${messageIndex}][condition_param]" class="form-control" placeholder="Param" value="status">
                                                                </div>
                                                                <div class="col">
                                                                    <select name="messages[${messageIndex}][condition_operator]" class="form-control">
                                                                        <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" name="messages[${messageIndex}][condition_value]" class="form-control" placeholder="Value" value="200">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <button type="button" class="btn btn-outline-danger btn-sm mt-2 remove-message">Remove</button>
                                                    `;


                                    container.appendChild(newGroup);
                                    messageIndex++;
                                });

                                // Remove Destination
                                document.addEventListener('click', function(e) {
                                    if (e.target && e.target.classList.contains('remove-destination')) {
                                        e.target.closest('.destination-group').remove();
                                    }
                                });

                                // Remove Message
                                document.addEventListener('click', function(e) {
                                    if (e.target && e.target.classList.contains('remove-message')) {
                                        e.target.closest('.message-group').remove();
                                    }
                                });
                            });
                        </script>


                        {{-- If the user clicked “Google Calendar” --}}
                    @elseif($tool['type'] === 'googleCalendar')
                        <h4>Google Calendar</h4>

                        <form method="POST"
                            action="{{ route('tools.googleCalendarUpdate', ['type' => 'gbooking', 'id' => $user->id]) }}">
                            @csrf
                            @if (isset($toolData['id']))
                                @method('PATCH')
                            @endif
                            <!-- 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"
                                    value="{{ $toolData['function']['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">{{ $toolData['function']['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">Update 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);
                                const selectedCalendar = @json($tool->calendar_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) {
                                            const isSelected = calendar.id === selectedCalendar ? 'selected' : '';
                                            $('#availableCalendars').append(
                                                `<option value="${calendar.id}" ${isSelected}>${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;

                                const userId = @json($user->id);
                                const toolId = @json($toolData['id'] ?? null);

                                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"
                                        }
                                    ]
                                };

                                if (toolId) {
                                    requestJson.id = toolId;
                                }

                                document.getElementById('toolDataInput').value = JSON.stringify(requestJson);
                                e.target.submit();
                            });
                        </script>



                        {{-- If the user clicked “Google Calendar Check Availability” --}}
                    @elseif($tool['type'] === 'googleSheet')
                        <h4>Update Google Sheet Tool</h4>
                        <form method="POST"
                            action="{{ route('tools.googleSheetUpdate', ['type' => 'googleSheet', 'id' => $user_id ?? auth()->id()]) }}"
                            onsubmit="return updateGoogleSheetTool();">
                            @csrf

                            <input type="hidden" name="tool_data" id="toolDataInput">

                            <!-- Tool Name -->
                            <div class="mb-3">
                                <label class="form-label">Tool Name</label>
                                <input type="text" id="googlesheetToolName" class="form-control"
                                    value="{{ $toolData['function']['name'] ?? '' }}">
                            </div>

                            <!-- Description -->
                            <div class="mb-3">
                                <label class="form-label">Description</label>
                                <textarea id="googleSheetDescription" class="form-control" rows="3">{{ $toolData['function']['description'] ?? '' }}</textarea>
                            </div>

                            <!-- Use Case -->
                            <div class="mb-3">
                                <label class="form-label">Use Case</label>
                                <select id="userCase" name="use_case" class="form-select">
                                    <option value="">-- Select a use case --</option>
                                    <option value="real_estate"
                                        {{ $tool['use_case'] == 'real_estate' ? 'selected' : '' }}>Real Estate</option>
                                    <option value="lead_intake"
                                        {{ $tool['use_case'] == 'lead_intake' ? 'selected' : '' }}>Lead Intake & Quote
                                        Tracker</option>
                                    <option value="case_intake"
                                        {{ $tool['use_case'] == 'case_intake' ? 'selected' : '' }}>Case Intake & Client
                                        Tracker</option>
                                    <option value="primary_care"
                                        {{ $tool['use_case'] == 'primary_care' ? 'selected' : '' }}>Primary Care</option>
                                    <option value="car_dealership"
                                        {{ $tool['use_case'] == 'car_dealership' ? 'selected' : '' }}>Car Dealership
                                    </option>
                                </select>
                            </div>

                            <!-- Google Sheet Dropdown -->
                            <div class="mb-3">
                                <label class="form-label">Select Google Sheet</label>
                                <select id="googleSheetDropdown" class="form-select">
                                    <option value="">-- Select a Sheet --</option>
                                </select>
                            </div>

                            <!-- JS to load sheets and preselect -->
                            <script>
                                $(document).ready(function() {
                                    const userId = "{{ $user_id ?? auth()->id() }}";
                                    const selectedSheetId = "{{ $tool['sheet_id'] ?? '' }}";

                                    $.ajax({
                                        url: `/get_google_sheets?user_id=${userId}`,
                                        method: "GET",
                                        success: function(sheets) {
                                            const dropdown = $('#googleSheetDropdown');
                                            dropdown.empty().append('<option value="">-- Select a Sheet --</option>');
                                            sheets.forEach(sheet => {
                                                const selected = (sheet.id === selectedSheetId) ? 'selected' : '';
                                                dropdown.append(
                                                    `<option value="${sheet.id}" ${selected}>${sheet.name}</option>`
                                                );
                                            });
                                        },
                                        error: function() {
                                            alert("Failed to load Google Sheets");
                                        }
                                    });
                                });
                            </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>
                                    <button type="button" id="addMessageButton"
                                        class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown"
                                        aria-expanded="false">+ Add Message</button>
                                    <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>

                            <!-- Submit -->
                            <div class="d-flex justify-content-end mt-4">
                                <button type="submit" class="btn btn-primary">Update Tool</button>
                            </div>
                        </form>

                        <!-- Final Script to Prepare Update Payload -->
                        <script>
                            function updateGoogleSheetTool() {
                                const userId = `{{ $user_id ?? auth()->id() }}`;

                                const tool = {
                                    id: `{{ $tool['id'] ?? '' }}`,
                                    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"
                                                }
                                            }
                                        }
                                    },
                                    server: {
                                        secret: "",
                                        url: `https://ithinqai-admin.ithinq.ai/api/google_sheet_tool_webhook?userID=${userId}`
                                    },
                                    sheet_id: document.getElementById('googleSheetDropdown').value,
                                    use_case: document.getElementById('userCase').value,
                                    messages: []
                                };

                                // Collect messages
                                const messageGroups = document.querySelectorAll('.message-group');
                                messageGroups.forEach(group => {
                                    const title = group.querySelector('h5')?.innerText || '';
                                    const type = title.toLowerCase().includes('start') ? 'start' :
                                        title.toLowerCase().includes('complete') ? 'complete' :
                                        title.toLowerCase().includes('failed') ? 'failed' :
                                        title.toLowerCase().includes('delayed') ? 'delayed' : '';

                                    const message = {
                                        type
                                    };

                                    if (type === 'start') {
                                        const customChecked = group.querySelector(`input[id^="custom"]`)?.checked;
                                        const waitChecked = group.querySelector(`input[id^="wait"]`)?.checked;

                                        message.mode = customChecked ? 'custom' :
                                            group.querySelector(`input[id^="none"]`)?.checked ? 'none' : 'default';

                                        message.wait_for = waitChecked || false;
                                    } else {
                                        message.content = group.querySelector('textarea')?.value || '';

                                        if (type === 'complete' || type === 'failed') {
                                            message.end_call = group.querySelector(`input[id^="end"]`)?.checked || false;
                                        } else if (type === 'delayed') {
                                            message.timing = parseInt(group.querySelector(`input[id^="timing"]`)?.value) || 1000;
                                        }
                                    }

                                    // Handle conditions
                                    const conditionGroups = group.querySelectorAll('.condition-group');
                                    if (conditionGroups.length > 0) {
                                        message.conditions = [];
                                        conditionGroups.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 && op && value) {
                                                message.conditions.push({
                                                    param,
                                                    op,
                                                    value
                                                });
                                            }
                                        });
                                    }

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


                                document.getElementById('toolDataInput').value = JSON.stringify(tool);
                                return true; // Submit form
                            }
                        </script>
                    @elseif($toolData['type'] === 'google-calendar-check')
                        <h4>Google Calendar Check Availability Form</h4>
                        <form>
                            <!-- 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>

                            <!-- 2) 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>

                            <!-- 3) 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>

                            <!-- 4) Calendar ID -->
                            <div class="mb-3">
                                <label for="checkCalendarId" class="form-label">Calendar ID</label>
                                <input type="text" id="checkCalendarId" class="form-control"
                                    placeholder="Enter Calendar ID">
                            </div>

                            <!-- 5) Date -->
                            <div class="mb-3">
                                <label for="checkDate" class="form-label">Date</label>
                                <input type="date" id="checkDate" class="form-control" placeholder="dd/mm/yyyy">
                            </div>

                            <!-- 6) Time -->
                            <div class="mb-3">
                                <label for="checkTime" class="form-label">Time</label>
                                <input type="time" id="checkTime" class="form-control" placeholder="--:-- --">
                            </div>

                            <!-- 7) Create Tool Button -->
                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary">Create Tool</button>
                            </div>
                        </form>


                        {{-- If the user clicked “GHL Calendar” --}}
                    @elseif($tool['type'] === 'booking')
                        <h4>Update GHL Calendar</h4>
                        <form method="POST"
                            action="{{ route('tools.ghlCalendarUpdate', ['type' => 'booking', 'id' => $user->id]) }}">
                            @csrf
                            @if (isset($toolData['id']))
                                @method('PATCH')
                            @endif

                            <input type="hidden" name="tool_data" id="toolDataInput">
                            <input type="hidden" name="location_id" id="locationInput">
                            <input type="hidden" name="calendar_id" id="calendarInput">

                            {{-- For update --}}
                            @if (isset($toolData['id']))
                                <input type="hidden" name="is_update" value="1">
                                <input type="hidden" name="tool_id" value="{{ $toolData['id'] }}">
                            @endif

                            <div class="mb-3">
                                <label for="toolName" class="form-label">Name</label>
                                <input type="text" id="toolName" class="form-control"
                                    value="{{ $toolData['function']['name'] ?? '' }}" placeholder="Enter name">
                            </div>

                            <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">{{ $toolData['function']['description'] ?? '' }}</textarea>
                            </div>

                            <div class="mb-3">
                                <label for="availableLocations" class="form-label">Available Locations</label>
                                <select id="availableLocations" class="form-control">
                                    <option value="">Select a location</option>
                                    @foreach ($locations as $location)
                                        <option value="{{ $location }}"
                                            {{ $tool->location_id == $location ? 'selected' : '' }}>
                                            {{ $location }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="selectCalendar" class="form-label">Select Calendar</label>
                                <select id="selectCalendar" class="form-control"
                                    data-selected-calendar="{{ $tool->calendar_id }}">
                                    <option value="">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>


                            <div class="mt-4">
                                <button type="submit"
                                    class="btn btn-primary">{{ isset($toolData['id']) ? 'Update' : '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;
                                const toolId = document.querySelector('input[name="tool_id"]')?.value;

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

                                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 }}"
                                    },
                                    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"
                                        }
                                    ]
                                };

                                if (toolId) requestJson.id = toolId;

                                document.getElementById('toolDataInput').value = JSON.stringify(requestJson);
                                document.getElementById('locationInput').value = location;
                                document.getElementById('calendarInput').value = calendar;

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



                        {{-- If the user clicked “Query” --}}
                    @elseif($tool['type'] === 'query')
                        <h4>Update Query Tool</h4>
                        <form method="POST" {{-- @php
                                dd($toolData['id']);
                            @endphp --}}
                            action="{{ isset($toolData['id']) ? route('tools.queryUpdate', ['type' => 'query', 'id' => $user->id ?? auth()->id()]) : route('tools.QueryStore', ['type' => 'query', 'id' => $user_id ?? auth()->id()]) }}">
                            @csrf
                            @if (isset($toolData['id']))
                                @method('PATCH')
                            @endif

                            <input type="hidden" name="tool_data" id="toolDataInput">

                            <!-- Tool Name -->
                            <div class="mb-3">
                                <label for="toolName" class="form-label">Tool Name</label>
                                <input type="text" id="toolName" class="form-control"
                                    value="{{ $toolData['function']['name'] ?? '' }}"
                                    placeholder="Enter the tool name...">
                            </div>

                            <!-- 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...">{{ $toolData['function']['description'] ?? '' }}</textarea>
                            </div>

                            <!-- Knowledge Bases -->
                            <div class="mb-3">
                                <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">
                                    {{-- Preload existing KBs --}}
                                    @if (isset($toolData['knowledgeBases']))
                                        @foreach ($toolData['knowledgeBases'] as $kb)
                                            <div class="d-flex flex-column mb-3 border p-3">
                                                <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" value="{{ $kb['name'] }}">
                                                </div>
                                                <div class="mb-2">
                                                    <textarea class="form-control form-control-sm mb-2" placeholder="Description">{{ $kb['description'] }}</textarea>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">File ID (UUID)</label>
                                                    <div class="fileIdsContainer">
                                                        @foreach ($kb['fileIds'] as $fileId)
                                                            <div class="d-flex align-items-center mb-2">
                                                                <input type="text"
                                                                    class="form-control form-control-sm mb-2"
                                                                    value="{{ $fileId }}">
                                                                <button type="button"
                                                                    class="btn btn-outline-danger btn-sm deleteFileIdButton">Delete</button>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                    <button type="button"
                                                        class="btn btn-primary btn-sm addFileIdButton">+ Add File
                                                        ID</button>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>

                            <!-- Messages Section -->
                            <div class="mb-3">
                                <div class="mb-3 d-flex align-items-center justify-content-between">
                                    <div class="form-label">Messages</div>
                                    <button type="button" id="addMessageButton"
                                        class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        + Add Message
                                    </button>
                                    <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;">
                                    @if (isset($toolData['messages']) && count($toolData['messages']))
                                        <p class="text-muted">Messages loaded via JS</p>
                                        {{-- JS will populate --}}
                                    @else
                                        <p class="text-muted">No messages configured. Click “Add Message” to add your first
                                            message.</p>
                                    @endif
                                </div>
                            </div>

                            <!-- Submit Button -->
                            <div class="d-flex justify-content-end">
                                <button type="submit"
                                    class="btn {{ isset($toolData['id']) ? 'btn-warning' : 'btn-success' }}">
                                    {{ isset($toolData['id']) ? 'Update Tool' : 'Create Tool' }}
                                </button>
                            </div>
                        </form>

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

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

                                window.addMessageForm = function(type, prefill = null) {
                                    messageCount++;
                                    const id = messageCount;

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

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

                                    let html = '';
                                    const messageValue = prefill?.content || '';

                                    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</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</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 before triggering tool
                                                    </label>
                                                </div>
                                                <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                                <div class="conditionsContainer"></div>
                                            `;
                                            break;

                                        case 'complete':
                                        case 'failed':
                                            html = `
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <h5 class="mb-0">Request ${type === 'complete' ? 'Complete' : '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…">${messageValue}</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</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…">${messageValue}</textarea>
                                                    </div>
                                                    <div class="mb-2">
                                                        <label class="form-label" for="timing${id}">Timing (ms)</label>
                                                        <input type="number" id="timing${id}" class="form-control mb-2" value="${prefill?.timing || 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);

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

                                    function addCondition(container, condition = {}) {
                                        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" value="${condition.param || ''}">
                                                </div>
                                                <div class="col">
                                                    <select class="form-control form-control-sm">
                                                        <option value="eq" ${condition.operator === 'eq' ? 'selected' : ''}>Equal (eq)</option>
                                                        <option value="neq" ${condition.operator === 'neq' ? 'selected' : ''}>Not Equal (neq)</option>
                                                        <option value="gt" ${condition.operator === 'gt' ? 'selected' : ''}>Greater Than</option>
                                                        <option value="lt" ${condition.operator === 'lt' ? 'selected' : ''}>Less Than</option>
                                                    </select>
                                                </div>
                                                <div class="col">
                                                    <input type="text" class="form-control form-control-sm" placeholder="Value" value="${condition.value || ''}">
                                                </div>
                                                <div class="col-auto">
                                                    <button type="button" class="btn btn-outline-danger btn-sm deleteConditionBtn">Delete</button>
                                                </div>
                                            </div>
                                        `;
                                        container.appendChild(cond);

                                        cond.querySelector('.deleteConditionBtn').addEventListener('click', () => cond.remove());
                                    }

                                    // Bind the add condition button
                                    wrapper.querySelector('.addConditionBtn')?.addEventListener('click', () => {
                                        const conds = wrapper.querySelector('.conditionsContainer');
                                        addCondition(conds);
                                    });

                                    // Auto populate existing conditions (if editing)
                                    if (prefill?.conditions?.length) {
                                        const conds = wrapper.querySelector('.conditionsContainer');
                                        prefill.conditions.forEach(c => addCondition(conds, c));
                                    }

                                }

                                // 👇 Auto populate messages if editing
                                @if (isset($toolData['messages']))
                                    @foreach ($toolData['messages'] as $msg)
                                        addMessageForm("{{ str_replace('request-', '', $msg['type']) }}", @json($msg));
                                    @endforeach
                                @endif
                            })();
                        </script>
                        <script>
                            document.addEventListener('DOMContentLoaded', () => {
                                // === Utilities ===
                                function createFileIdInput(value = '') {
                                    const fileDiv = document.createElement('div');
                                    fileDiv.className = 'd-flex align-items-center mb-2';
                                    fileDiv.innerHTML = `
                                        <input type="text" class="form-control form-control-sm mb-2" value="${value}" placeholder="e.g. 123e4567-e89b-12d3-a456-426614174000">
                                        <button type="button" class="btn btn-outline-danger btn-sm deleteFileIdButton">Delete</button>
                                    `;
                                    bindDeleteFileIdButton(fileDiv.querySelector('.deleteFileIdButton'));
                                    return fileDiv;
                                }

                                function bindDeleteFileIdButton(button) {
                                    button.addEventListener('click', () => {
                                        button.closest('.d-flex.align-items-center')?.remove();
                                    });
                                }

                                function bindAddFileId(button) {
                                    button.addEventListener('click', () => {
                                        const fileContainer = button.previousElementSibling;
                                        const fileDiv = createFileIdInput();
                                        fileContainer.appendChild(fileDiv);
                                    });
                                }

                                function bindDeleteKbButtons() {
                                    document.querySelectorAll('.deleteKbButton').forEach(btn => {
                                        btn.addEventListener('click', () => btn.closest('.border.p-3').remove());
                                    });
                                }

                                function bindAddFileIdButtons() {
                                    document.querySelectorAll('.addFileIdButton').forEach(bindAddFileId);
                                }

                                function bindExistingFileIdDeletes() {
                                    document.querySelectorAll('.deleteFileIdButton').forEach(bindDeleteFileIdButton);
                                }

                                // === Initial Bindings ===
                                bindDeleteKbButtons();
                                bindAddFileIdButtons();
                                bindExistingFileIdDeletes(); // ✅ Fix: now preloaded UUIDs can be deleted too

                                // === Handle "+ Add Knowledge Base" dynamically ===
                                document.getElementById('addKbButton')?.addEventListener('click', () => {
                                    const kbList = document.getElementById('kbList');
                                    const kbDiv = document.createElement('div');
                                    kbDiv.className = 'd-flex flex-column mb-3 border p-3';

                                    kbDiv.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>
                                        <div class="mb-3">
                                            <label class="form-label">File ID (UUID)</label>
                                            <div class="fileIdsContainer"></div>
                                            <button type="button" class="btn btn-primary btn-sm addFileIdButton">+ Add File ID</button>
                                        </div>
                                    `;

                                    kbList.appendChild(kbDiv);

                                    // Re-bind delete/add buttons for this new KB
                                    kbDiv.querySelector('.deleteKbButton').addEventListener('click', () => kbDiv.remove());
                                    bindAddFileId(kbDiv.querySelector('.addFileIdButton'));
                                });
                            });
                        </script>
                        <script>
                            function collectKnowledgeBases() {
                                const kbBlocks = document.querySelectorAll('#kbList > .border.p-3');
                                const kbData = [];

                                kbBlocks.forEach(kb => {
                                    const name = kb.querySelector('input[type="text"]').value;
                                    const description = kb.querySelector('textarea').value;
                                    const fileIds = Array.from(kb.querySelectorAll('.fileIdsContainer input[type="text"]')).map(input =>
                                        input.value);

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

                                return kbData;
                            }

                            function collectMessages() {
                                const messages = [];

                                document.querySelectorAll('.message-group').forEach(msgBlock => {
                                    const heading = msgBlock.querySelector('h5')?.innerText?.toLowerCase() || '';
                                    const type = heading.includes('start') ? 'request-start' :
                                        heading.includes('complete') ? 'request-complete' :
                                        heading.includes('failed') ? 'request-failed' :
                                        heading.includes('delayed') ? 'request-delayed' :
                                        'unknown';

                                    const content = msgBlock.querySelector('textarea')?.value || '';
                                    const conditions = [];

                                    msgBlock.querySelectorAll('.condition-group').forEach(cond => {
                                        const param = cond.querySelector('input[type="text"]')?.value;
                                        const operator = cond.querySelector('select')?.value;
                                        const value = cond.querySelectorAll('input[type="text"]')[1]?.value;

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

                                    messages.push({
                                        type,
                                        content,
                                        conditions
                                    });
                                });

                                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(); // make sure this function exists
                                const messageList = collectMessages(); // make sure this function exists

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

                                // ✅ Inject tool ID if editing
                                if ("{{ $toolData['id'] ?? '' }}") {
                                    requestJson.id = "{{ $toolData['id'] }}";
                                }

                                document.getElementById('toolDataInput').value = JSON.stringify(requestJson);
                                e.target.submit();
                            });
                        </script>

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

                            <!-- Tool Name -->
                            <div class="mb-3">
                                <label for="sendTextToolName" class="form-label">Tool Name</label>
                                <input type="text" id="sendTextToolName" class="form-control"
                                    value="{{ $toolData['function']['name'] ?? '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">{{ $toolData['function']['description'] ?? '' }}</textarea>
                            </div>

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

                            <!-- Messages Section -->
                            <div class="mb-3">
                                <div class="mb-3 d-flex align-items-center justify-content-between">
                                    <div class="form-label">Messages</div>
                                    <button type="button" id="addMessageButton"
                                        class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        + Add Message
                                    </button>
                                    <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>

                            <div class="d-flex justify-content-end mt-4">
                                <button type="submit" class="btn btn-primary">Update Tool</button>
                            </div>
                        </form>

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

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

                                window.addMessageForm = function(type, prefill = null) {
                                    messageCount++;
                                    const id = messageCount;
                                    const placeholder = list.querySelector('.text-muted');
                                    if (placeholder) placeholder.remove();

                                    const wrapper = document.createElement('div');
                                    wrapper.className = 'border rounded p-3 mb-3 message-group';
                                    let html = '';
                                    const messageValue = prefill?.content || '';

                                    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</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</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 before triggering tool
                                                    </label>
                                                </div>
                                                <button type="button" class="btn btn-secondary btn-sm mb-2 addConditionBtn">+ Add Condition</button>
                                                <div class="conditionsContainer"></div>
                                            `;
                                            break;

                                        case 'complete':
                                        case 'failed':
                                            html = `
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <h5 class="mb-0">Request ${type === 'complete' ? 'Complete' : '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…">${messageValue}</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</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…">${messageValue}</textarea>
                                                    </div>
                                                    <div class="mb-2">
                                                        <label class="form-label" for="timing${id}">Timing (ms)</label>
                                                        <input type="number" id="timing${id}" class="form-control mb-2" value="${prefill?.timing || 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);

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

                                    wrapper.querySelector('.addConditionBtn').addEventListener('click', () => {
                                        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</option>
                                                                        <option value="lt">Less Than</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);
                                        cond.querySelector('.deleteConditionBtn').addEventListener('click', () => cond
                                            .remove());
                                    });

                                    if (prefill?.conditions?.length) {
                                        const conds = wrapper.querySelector('.conditionsContainer');
                                        prefill.conditions.forEach(c => {
                                            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" value="${c.param}">
                                                                    </div>
                                                                    <div class="col">
                                                                        <select class="form-control form-control-sm">
                                                                            <option value="eq" ${c.operator === 'eq' ? 'selected' : ''}>Equal (eq)</option>
                                                                            <option value="neq" ${c.operator === 'neq' ? 'selected' : ''}>Not Equal (neq)</option>
                                                                            <option value="gt" ${c.operator === 'gt' ? 'selected' : ''}>Greater Than</option>
                                                                            <option value="lt" ${c.operator === 'lt' ? 'selected' : ''}>Less Than</option>
                                                                        </select>
                                                                    </div>
                                                                    <div class="col">
                                                                        <input type="text" class="form-control form-control-sm" placeholder="Value" value="${c.value}">
                                                                    </div>
                                                                    <div class="col-auto">
                                                                        <button type="button" class="btn btn-outline-danger btn-sm deleteConditionBtn">Delete</button>
                                                                    </div>
                                                                </div>`;
                                            conds.appendChild(cond);
                                            cond.querySelector('.deleteConditionBtn').addEventListener('click', () => cond
                                                .remove());
                                        });
                                    }
                                };

                                @if (isset($toolData['messages']))
                                    @foreach ($toolData['messages'] as $msg)
                                        addMessageForm("{{ str_replace('request-', '', $msg['type']) }}", @json($msg));
                                    @endforeach
                                @endif
                            })();
                        </script>

                        <script>
                            function collectMessages() {
                                const messages = [];

                                document.querySelectorAll('.message-group').forEach(msgBlock => {
                                    const heading = msgBlock.querySelector('h5')?.innerText?.toLowerCase() || '';
                                    const type = heading.includes('start') ? 'request-start' :
                                        heading.includes('complete') ? 'request-complete' :
                                        heading.includes('failed') ? 'request-failed' :
                                        heading.includes('delayed') ? 'request-delayed' :
                                        'unknown';

                                    const content = msgBlock.querySelector('textarea')?.value || '';
                                    const conditions = [];

                                    msgBlock.querySelectorAll('.condition-group').forEach(cond => {
                                        const param = cond.querySelector('input[type="text"]')?.value;
                                        const operator = cond.querySelector('select')?.value;
                                        const value = cond.querySelectorAll('input[type="text"]')[1]?.value;

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

                                    messages.push({
                                        type,
                                        content,
                                        conditions
                                    });
                                });

                                return messages;
                            }
                        </script>

                        <script>
                            function prepareSendTextToolData() {
                                const tool = {
                                    id: document.getElementById('toolId').value || undefined,
                                    type: "send_text",
                                    async: false,
                                    smsPhoneNumber: 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: collectMessages()
                                };

                                document.getElementById('toolDataInput').value = JSON.stringify(tool);
                                return true;
                            }
                        </script>
                        {{-- If the user clicked “DTMF” --}}
                    @elseif($toolData['type'] === 'dtmf')
                        <h4>Update 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">+ Add
                                        Property</button>
                                </div>
                                <div id="dtmfParamList" 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>

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

                            <!-- 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($toolData['type'] === 'end-call')
                        <h4>Update 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">+ 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>

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

                            <!-- 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