{{-- resources/views/crm/lead/index.blade.php --}}
@extends('layouts.app')

@section('title', 'Lead Management')

@push('styles')
<style>
    .badge { font-size: 0.85em; }
    .table th { border-top: none; }
    .lead-subject {
        max-width: 300px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .view-lead-details {
        color: #007bff;
        text-decoration: none;
        font-weight: 500;
    }
    .view-lead-details:hover {
        text-decoration: underline;
    }
</style>
@endpush

@section('content')
<div class="loadPages01">
    <div class="actionsHeader filterHeader">
        <ul class="ml-auto">
            {{-- @can('lead.create')
            <li>
                <button data-toggle="modal" data-target="#addLeadModal" class="btn btn-block btn-add">
                    <i class="las la-plus"></i> Add New Lead
                </button>
            </li>
            @endcan --}}
        </ul>
    </div>
   
    <div class="card card-body card-dashboard-twentyfive border-left-0 border-right-0 px-0 pd-t-6 pd-b-6 viewContainer">
        <div class="table-responsive">
            <table id="leadsTable" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Lead ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Designation</th>
                        <th>Organization</th>
                        
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- DataTable will load data here -->
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Add Lead Modal --}}
@push('modals')
<!-- View Lead Details Modal -->
<div class="modal fade" id="viewLeadModal" tabindex="-1" role="dialog" aria-labelledby="viewLeadModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewLeadModalLabel">Lead Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Content will be loaded dynamically via AJAX -->
                <div class="text-center py-4">
                    <i class="fas fa-spinner fa-spin fa-2x"></i>
                    <p class="mt-2">Loading lead details...</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                @can('lead.convert_to_ticket')
                <button type="button" class="btn btn-success" id="convertFromViewBtn" style="display: none;">
                    <i class="las la-exchange-alt"></i> Convert to Ticket
                </button>
                @endcan
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="addLeadModal" tabindex="-1" role="dialog" aria-labelledby="addLeadModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addLeadModalLabel">Add New Lead</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="addLeadForm" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Name <span class="asterisk">*</span></label>
                                <input type="text" class="form-control" name="name" required 
                                       placeholder="Enter full name">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Email <span class="asterisk">*</span></label>
                                <input type="email" class="form-control" name="email" required 
                                       placeholder="Enter email address">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Phone</label>
                                <input type="text" class="form-control" name="phone" 
                                       placeholder="Enter phone number">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Designation</label>
                                <input type="text" class="form-control" name="designation" 
                                       placeholder="e.g., Developer, Manager">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Organization</label>
                                <input type="text" class="form-control" name="organization" 
                                       placeholder="Company/Organization name">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Lead Source</label>
                                <select class="form-control" name="lead_source">
                                    <option value="">Select Source</option>
                                    @foreach(\App\Models\MailBox::where('status', 1)->get() as $mailbox)
                                        <option value="{{ $mailbox->id }}">{{ $mailbox->name }}</option>
                                    @endforeach
                                    <option value="manual">Manual Entry</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Subject <span class="asterisk">*</span></label>
                                <input type="text" class="form-control" name="subject" required 
                                       placeholder="Enter subject">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Message</label>
                                <textarea class="form-control" name="message" rows="4" 
                                          placeholder="Enter message content"></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Lead Status <span class="asterisk">*</span></label>
                                <select class="form-control" name="lead_status" required>
                                    <option value="1">New</option>
                                    <option value="2">Contacted</option>
                                    <option value="3">Qualified</option>
                                    <option value="4">Lost</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Priority <span class="asterisk">*</span></label>
                                <select class="form-control" name="lead_priority" required>
                                    <option value="1">High</option>
                                    <option value="2">Medium-High</option>
                                    <option value="3" selected>Medium</option>
                                    <option value="4">Low</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Active <span class="asterisk">*</span></label>
                                <select class="form-control" name="active" required>
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="btn_save">
                        <i class="las la-save"></i> Save Lead
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Edit Lead Modal --}}
<div class="modal fade" id="editLeadModal" tabindex="-1" role="dialog" aria-labelledby="editLeadModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editLeadModalLabel">Edit Lead</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="editLeadForm" method="POST">
                @csrf
                @method('PUT')
                <input type="hidden" name="id" id="edit_lead_id">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Name <span class="asterisk">*</span></label>
                                <input type="text" class="form-control" name="name" id="edit_name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Email <span class="asterisk">*</span></label>
                                <input type="email" class="form-control" name="email" id="edit_email" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Phone</label>
                                <input type="text" class="form-control" name="phone" id="edit_phone">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Designation</label>
                                <input type="text" class="form-control" name="designation" id="edit_designation">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Organization</label>
                                <input type="text" class="form-control" name="organization" id="edit_organization">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Lead Source</label>
                                <select class="form-control" name="lead_source" id="edit_lead_source">
                                    <option value="">Select Source</option>
                                    @foreach(\App\Models\MailBox::where('status', 1)->get() as $mailbox)
                                        <option value="{{ $mailbox->id }}">{{ $mailbox->name }}</option>
                                    @endforeach
                                    <option value="manual">Manual Entry</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Subject <span class="asterisk">*</span></label>
                                <input type="text" class="form-control" name="subject" id="edit_subject" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Message</label>
                                <textarea class="form-control" name="message" id="edit_message" rows="4"></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Lead Status <span class="asterisk">*</span></label>
                                <select class="form-control" name="lead_status" id="edit_lead_status" required>
                                    <option value="1">New</option>
                                    <option value="2">Contacted</option>
                                    <option value="3">Qualified</option>
                                    <option value="4">Lost</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Priority <span class="asterisk">*</span></label>
                                <select class="form-control" name="lead_priority" id="edit_lead_priority" required>
                                    <option value="1">High</option>
                                    <option value="2">Medium-High</option>
                                    <option value="3">Medium</option>
                                    <option value="4">Low</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Active <span class="asterisk">*</span></label>
                                <select class="form-control" name="active" id="edit_active" required>
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="btn_update">
                        <i class="las la-save"></i> Update Lead
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- View Lead Details Modal --}}
<div class="modal fade" id="viewLeadModal" tabindex="-1" role="dialog" aria-labelledby="viewLeadModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewLeadModalLabel">Lead Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <p><strong>Lead ID:</strong> <span id="view_lead_id"></span></p>
                                        <p><strong>Name:</strong> <span id="view_name"></span></p>
                                        <p><strong>Email:</strong> <span id="view_email"></span></p>
                                        <p><strong>Phone:</strong> <span id="view_phone"></span></p>
                                        <p><strong>Designation:</strong> <span id="view_designation"></span></p>
                                        <p><strong>Organization:</strong> <span id="view_organization"></span></p>
                                    </div>
                                    <div class="col-md-6">
                                        <p><strong>Status:</strong> <span id="view_status"></span></p>
                                        <p><strong>Priority:</strong> <span id="view_priority"></span></p>
                                        <p><strong>Source:</strong> <span id="view_source"></span></p>
                                        <p><strong>Created At:</strong> <span id="view_created_at"></span></p>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-12">
                                        <p><strong>Subject:</strong></p>
                                        <p id="view_subject" class="border p-2 rounded"></p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <p><strong>Message:</strong></p>
                                        <div id="view_message" class="border p-3 rounded bg-light"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                @can('lead.convert_to_ticket')
                <button type="button" class="btn btn-success" id="convertFromViewBtn">
                    <i class="las la-exchange-alt"></i> Convert to Ticket
                </button>
                @endcan
            </div>
        </div>
    </div>
</div>
@endpush
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Initialize DataTable
    var errorShown = false;
    var table = $('#leadsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('crm.lead.index') }}",
            type: "GET",
            error: function(xhr, error, thrown) {
                if (errorShown) {
                    return;
                }
                
                errorShown = true;

                if (xhr.status === 403) {
                    toastr.error(xhr.responseJSON?.message || 'Access denied: No permission');
                    table.clear().draw();
                    setTimeout(() => { errorShown = false; }, 5000);
                }
                else if (xhr.status === 401) {
                    toastr.error('Please login to access this page.');
                    window.location.href = "{{ route('admin.login') }}";
                }
                else if (xhr.status === 500) {
                    toastr.error('Server error. Please try again later.');
                    setTimeout(() => { errorShown = false; }, 10000);
                }
                else {
                    toastr.error('Failed to load table data.');
                    setTimeout(() => { errorShown = false; }, 5000);
                }
            }
        },
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'r_id', name: 'r_id' },
            { data: 'name', name: 'name' },
            { data: 'email', name: 'email' },
            { data: 'phone', name: 'phone' },
            { data: 'designation', name: 'designation' },
            { data: 'organization', name: 'organization' },
            // { data: 'subject', name: 'subject' },
            // { data: 'lead_status', name: 'lead_status' },
            // { data: 'lead_priority', name: 'lead_priority' },
            // { data: 'source_mailbox_id', name: 'source_mailbox_id' },
            // { data: 'created_at', name: 'created_at' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        order: [[1, 'desc']]
    });

    // Add Lead Form Submission
    $('#addLeadForm').on('submit', function(e) {
        e.preventDefault();
        $('#loaderStatus').text('Saving lead...');
        $('#refreshLoader').removeClass('d-none');
        
        $.ajax({
            url: "{{ route('crm.lead.store') }}",
            method: "POST",
            beforeSend: function() {
                $('#btn_save').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');
            },
            data: $(this).serialize(),
            success: function(response) {
                if (response.status) {
                    $('#addLeadModal').modal('hide');
                    $('#addLeadForm')[0].reset();
                    table.ajax.reload();
                    toastr.success(response.message);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 403) {
                    const response = xhr.responseJSON;
                    toastr.error(response?.message || 'You do not have permission.');
                } else if (xhr.status === 401) {
                    toastr.error('Please login to continue.');
                    window.location.href = "{{ route('admin.login') }}";
                } else if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    $.each(errors, function(key, value) {
                        toastr.error(value[0]);
                    });
                } else {
                    toastr.error('An error occurred while saving data.');
                }
            },
            complete: function() {
                $('#btn_save').prop('disabled', false).html('<i class="las la-save"></i> Save Lead');
                setTimeout(() => {
                    $('#refreshLoader').addClass('d-none');
                }, 1000);
            }
        });
    });

    // View Lead Details
    $(document).on('click', '.view-lead-details', function() {
        var leadId = $(this).data('id');
        
        $.ajax({
            url: "{{ route('crm.lead.show') }}",
            method: "GET",
            data: { id: leadId },
            success: function(response) {
                if (response.status) {
                    const lead = response.data;
                    
                    $('#view_lead_id').text(lead.r_id || 'N/A');
                    $('#view_name').text(lead.name || 'N/A');
                    $('#view_email').text(lead.email || 'N/A');
                    $('#view_phone').text(lead.phone || 'N/A');
                    $('#view_designation').text(lead.designation || 'N/A');
                    $('#view_organization').text(lead.organization || 'N/A');
                    $('#view_subject').text(lead.subject || 'N/A');
                    
                    // Status badge
                    const statusMap = {1: 'New', 2: 'Contacted', 3: 'Qualified', 4: 'Lost'};
                    const statusClass = {1: 'badge-primary', 2: 'badge-info', 3: 'badge-success', 4: 'badge-danger'};
                    const status = statusMap[lead.lead_status] || 'Unknown';
                    const statusCls = statusClass[lead.lead_status] || 'badge-secondary';
                    $('#view_status').html('<span class="badge ' + statusCls + '">' + status + '</span>');
                    
                    // Priority badge
                    const priorityMap = {1: 'High', 2: 'Medium-High', 3: 'Medium', 4: 'Low'};
                    const priorityClass = {1: 'badge-danger', 2: 'badge-warning', 3: 'badge-info', 4: 'badge-success'};
                    const priority = priorityMap[lead.lead_priority] || 'Unknown';
                    const priorityCls = priorityClass[lead.lead_priority] || 'badge-secondary';
                    $('#view_priority').html('<span class="badge ' + priorityCls + '">' + priority + '</span>');
                    
                    $('#view_source').text(lead.mailbox ? lead.mailbox.name : (lead.lead_source ? 'Manual' : 'N/A'));
                    $('#view_created_at').text(lead.created_at ? new Date(lead.created_at).toLocaleString() : 'N/A');
                    
                    // Message with line breaks
                    if (lead.message) {
                        $('#view_message').html('<pre style="white-space: pre-wrap; font-family: inherit;">' + escapeHtml(lead.message) + '</pre>');
                    } else {
                        $('#view_message').html('<p class="text-muted">No message</p>');
                    }
                    
                    // Store lead ID for conversion
                    $('#convertFromViewBtn').data('lead-id', leadId);
                    
                    $('#viewLeadModal').modal('show');
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                toastr.error('Failed to load lead details.');
            }
        });
    });

    // Helper function to escape HTML
    function escapeHtml(text) {
        if (!text) return '';
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    // Edit Lead - Show Modal
    $(document).on('click', '.btn-edit-lead', function() {
        var leadId = $(this).data('id');
        
        $.ajax({
            url: "{{ route('crm.lead.edit') }}",
            method: "GET",
            data: { id: leadId },
            success: function(response) {
                if (response.status) {
                    const lead = response.data;
                    
                    $('#edit_lead_id').val(leadId);
                    $('#edit_name').val(lead.name);
                    $('#edit_email').val(lead.email);
                    $('#edit_phone').val(lead.phone);
                    $('#edit_designation').val(lead.designation);
                    $('#edit_organization').val(lead.organization);
                    $('#edit_subject').val(lead.subject);
                    $('#edit_message').val(lead.message);
                    $('#edit_lead_status').val(lead.lead_status);
                    $('#edit_lead_priority').val(lead.lead_priority);
                    $('#edit_lead_source').val(lead.lead_source || '');
                    $('#edit_active').val(lead.active ? 1 : 0);
                    
                    $('#editLeadModal').modal('show');
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                toastr.error('Failed to load lead data.');
            }
        });
    });

    // Edit Lead Form Submission
    $('#editLeadForm').on('submit', function(e) {
        e.preventDefault();
        $('#loaderStatus').text('Updating lead...');
        $('#refreshLoader').removeClass('d-none');
        
        $.ajax({
            url: "{{ route('crm.lead.update') }}",
            method: "POST",
            data: $(this).serialize(),
            beforeSend: function() {
                $('#btn_update').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Updating...');
            },
            success: function(response) {
                if (response.status) {
                    $('#editLeadModal').modal('hide');
                    table.ajax.reload();
                    toastr.success(response.message);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    $.each(errors, function(key, value) {
                        toastr.error(value[0]);
                    });
                } else {
                    toastr.error('An error occurred while updating data.');
                }
            },
            complete: function() {
                $('#btn_update').prop('disabled', false).html('<i class="las la-save"></i> Update Lead');
                setTimeout(() => {
                    $('#refreshLoader').addClass('d-none');
                }, 1000);
            }
        });
    });

    // Delete Lead
    $(document).on('click', '.btn-delete-lead', function() {
        var leadId = $(this).data('id');
        
        swal({
            title: "Are you sure?",
            text: "Do you really want to delete this lead?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    url: "{{ route('crm.lead.delete') }}",
                    type: "DELETE",
                    data: {
                        id: leadId,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.status) {
                            toastr.success(response.message);
                            table.ajax.reload();
                        } else {
                            toastr.warning(response.message);
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 403) {
                            toastr.error('You do not have permission.');
                        } else {
                            toastr.error('An error occurred while deleting data.');
                        }
                    }
                });
            }
        });
    });

    // Convert Lead to Ticket
    $(document).on('click', '.btn-convert-lead, #convertFromViewBtn', function() {
        var leadId = $(this).data('lead-id') || $(this).data('id');
        
        swal({
            title: "Convert to Ticket",
            text: "Are you sure you want to convert this lead to a ticket?",
            icon: "info",
            buttons: true,
        }).then((willConvert) => {
            if (willConvert) {
                $.ajax({
                    url: "{{ route('crm.lead.convert') }}",
                    type: "POST",
                    data: {
                        id: leadId,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.status) {
                            $('#viewLeadModal').modal('hide');
                            table.ajax.reload();
                            toastr.success(response.message);
                        } else {
                            toastr.warning(response.message);
                        }
                    },
                    error: function(xhr) {
                        toastr.error('Failed to convert lead.');
                    }
                });
            }
        });
    });
});
// View Lead Details - Show Modal Popup
$(document).on('click', '.view-lead-details', function() {
    var leadId = $(this).data('id');
    
    // Show loading state
    $('#viewLeadModal .modal-body').html('<div class="text-center py-4"><i class="fas fa-spinner fa-spin fa-2x"></i><p class="mt-2">Loading lead details...</p></div>');
    $('#viewLeadModal').modal('show');
    
    $.ajax({
        url: "{{ route('crm.lead.show') }}",
        method: "GET",
        data: { id: leadId },
        success: function(response) {
           if (response.status) {
                // Update modal with HTML from controller
                $('#viewLeadModal .modal-body').html(response.html);
                $('#viewLeadModal .modal-title').text(response.title);
                
                // Store lead ID for conversion button
                $('#convertFromViewBtn').data('lead-id', leadId).show();
            } else {
                $('#viewLeadModal .modal-body').html('<div class="alert alert-danger">' + response.message + '</div>');
            }
        },
        error: function(xhr) {
            let errorMsg = 'Failed to load lead details.';
            if (xhr.status === 403) {
                errorMsg = 'You do not have permission to view this lead.';
            } else if (xhr.status === 404) {
                errorMsg = 'Lead not found.';
            }
            $('#viewLeadModal .modal-body').html('<div class="alert alert-danger">' + errorMsg + '</div>');
        }
    });
});

// Helper function to escape HTML
function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Reset modal when closed
$('#viewLeadModal').on('hidden.bs.modal', function () {
    $(this).find('.modal-body').empty();
    $('#convertFromViewBtn').data('lead-id', '').hide();
});
</script>
@endpush