{{-- Simple Add Agent Modal for User Dashboard --}}
<div id="simpleAgentModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Agent</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="simpleAgentModalForm" method="POST">
                @csrf
                <input type="hidden" name="tenant_id" value="{{ session('tenant_id') }}" />
                <input type="hidden" name="schedule_id" id="simpleAgentScheduleId" value="" />
                
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">First Name<span class="text-danger">*</span></label>
                            <input type="text" name="first_name" class="form-control" required />
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Last Name<span class="text-danger">*</span></label>
                            <input type="text" name="last_name" class="form-control" required />
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Email<span class="text-danger">*</span></label>
                            <input type="email" name="email" class="form-control" required />
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Phone<span class="text-danger">*</span></label>
                            <input type="text" name="phone" class="form-control phone_number_format" placeholder="(123) 456-7890" required />
                        </div>
                    </div>
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Agent</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Simple Agent Modal Functions
(function() {
    'use strict';
    
    // Function to show the simple agent modal
    window.showSimpleAgentModal = function(scheduleId) {
        console.log('📝 Opening simple agent modal for schedule:', scheduleId);
        
        // Store the schedule ID
        window.currentScheduleId = scheduleId;
        document.getElementById('simpleAgentScheduleId').value = scheduleId;
        
        // Reset form
        const form = document.getElementById('simpleAgentModalForm');
        if (form) {
            form.reset();
        }
        
        // Show modal using Bootstrap 5
        const modalEl = document.getElementById('simpleAgentModal');
        if (modalEl) {
            const modal = new bootstrap.Modal(modalEl);
            modal.show();
            
            // Initialize phone formatting after modal is shown
            setTimeout(() => {
                if (typeof window.initializePhoneFormatting === 'function') {
                    window.initializePhoneFormatting();
                }
            }, 100);
        }
    };
    
    // Handle form submission
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('simpleAgentModalForm');
        if (!form) return;
        
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(form);
            const submitBtn = form.querySelector('button[type="submit"]');
            const originalBtnText = submitBtn.textContent;
            const scheduleId = window.currentScheduleId;
            
            if (!scheduleId) {
                alert('Schedule ID is missing');
                return;
            }
            
            // Show loading state
            submitBtn.disabled = true;
            submitBtn.textContent = 'Saving...';
            
            // Use the simplified create-and-add endpoint
            const createAndAddUrl = `/schedule/${scheduleId}/agents/create-and-add-simple`;
            
            // Submit form via AJAX
            fetch(createAndAddUrl, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Show success message
                    if (window.toastr) {
                        toastr.success(data.message || 'Agent created and added successfully');
                    } else {
                        alert(data.message || 'Agent created and added successfully');
                    }
                    
                    // Close modal
                    const modalEl = document.getElementById('simpleAgentModal');
                    if (modalEl) {
                        const modal = bootstrap.Modal.getInstance(modalEl);
                        if (modal) modal.hide();
                    }
                    
                    // Reload schedules to refresh the data
                    if (typeof loadSchedules === 'function') {
                        loadSchedules();
                    }
                } else {
                    // Show error message
                    if (window.toastr) {
                        toastr.error(data.message || 'Failed to create agent');
                    } else {
                        alert(data.message || 'Failed to create agent');
                    }
                }
            })
            .catch(error => {
                console.error('Error creating agent:', error);
                if (window.toastr) {
                    toastr.error('An error occurred while creating the agent');
                } else {
                    alert('An error occurred while creating the agent');
                }
            })
            .finally(() => {
                // Reset button state
                submitBtn.disabled = false;
                submitBtn.textContent = originalBtnText;
            });
        });
    });
})();
</script>