@php
    use App\Models\Utility;
    $settings = Utility::colorset();
    $primaryColor = $settings['color'] ?? '#667eea';
    $isDarkMode = ($settings['cust_darklayout'] ?? 'off') == 'on';
    $themeBg = ($settings['cust_theme_bg'] ?? 'on') == 'on';
    
    // For gradient, use primary color or fallback
    $gradientStart = $primaryColor;
    $gradientEnd = $primaryColor;
    
    // If you have a secondary color setting, you can use it
    // $gradientEnd = $settings['secondary_color'] ?? $primaryColor;
@endphp

<style>
    /* CSS Variables from Theme Settings */
    :root {
        --theme-primary: '{{ $primaryColor }}';
        --theme-gradient: linear-gradient(135deg, '{{ $gradientStart }}' 0%, '{{ $gradientEnd }}' 100%);
        --theme-bg: {{ $isDarkMode ? '#1e293b' : '#ffffff' }};
        --theme-border: {{ $isDarkMode ? '#334155' : '#e5e7eb' }};
        --theme-text: {{ $isDarkMode ? '#f1f5f9' : '#1e293b' }};
        --theme-text-muted: {{ $isDarkMode ? '#94a3b8' : '#64748b' }};
        --theme-input-bg: {{ $isDarkMode ? '#334155' : '#ffffff' }};
        --theme-input-border: {{ $isDarkMode ? '#475569' : '#e2e8f0' }};
        --theme-input-hover: {{ $isDarkMode ? '#3b4252' : '#faf5ff' }};
        --theme-section-bg: {{ $isDarkMode ? '#0f172a' : '#f8fafc' }};
        --theme-tab-bg: {{ $isDarkMode ? '#0f172a' : '#f8fafc' }};
        --theme-tab-active: {{ $isDarkMode ? '#1e293b' : '#ffffff' }};
        --theme-footer-bg: {{ $isDarkMode ? '#0f172a' : '#f8fafc' }};
    }
    
    /* Modal Styles - Theme Enhanced */
    .modal-content {
        border-radius: 20px;
        border: none;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        overflow: hidden;
        background: var(--theme-bg);
    }

    .modal-header {
        background: var(--theme-gradient);
        color: white;
        border-radius: 0;
        padding: 18px 24px;
    }

    .modal-header .btn-close {
        filter: brightness(0) invert(1);
        opacity: 0.8;
        transition: all 0.2s;
    }

    .modal-header .btn-close:hover {
        opacity: 1;
        transform: rotate(90deg);
    }

    .modal-title {
        font-weight: 700;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        gap: 8px;
        color: #111;
    }

    .modal-title i {
        font-size: 1.2rem;
    }

    .form-label {
        font-weight: 600;
        font-size: 0.7rem;
        color: var(--theme-text-muted);
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .form-label i {
        font-size: 0.8rem;
        color: var(--theme-primary);
    }

    .form-control,
    .form-select {
        border-radius: 10px;
        border: 1.5px solid var(--theme-input-border);
        padding: 8px 12px;
        font-size: 0.85rem;
        transition: all 0.2s;
        min-height: 38px;
        background: var(--theme-input-bg);
        color: var(--theme-text);
    }

    .form-control:hover,
    .form-select:hover {
        border-color: var(--theme-primary);
        background: var(--theme-input-hover);
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--theme-primary);
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        background: var(--theme-input-bg);
        outline: none;
    }

    .form-control::placeholder {
        color: var(--theme-text-muted);
    }

    /* Custom Modal Width - No Bootstrap sizing classes */
    .custom-modal {
        width: 95%;
        max-width: 900px;
        margin: 1.75rem auto;
    }

    @media (min-width: 768px) {
        .custom-modal {
            max-width: 850px;
        }
    }

    @media (min-width: 992px) {
        .custom-modal {
            max-width: 950px;
        }
    }

    @media (min-width: 1200px) {
        .custom-modal {
            max-width: 1050px;
        }
    }

    @media (min-width: 1400px) {
        .custom-modal {
            max-width: 1150px;
        }
    }

    /* Compact Basic Info - Theme Enhanced */
    .basic-info-section {
        background: var(--theme-section-bg);
        border-radius: 16px;
        padding: 18px;
        margin-bottom: 20px;
        border: 1px solid var(--theme-border);
    }

    .basic-info-section .row {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 12px;
    }

    .basic-info-section h6 {
        font-size: 0.85rem;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 2px solid var(--theme-border);
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--theme-text);
    }

    /* Edit Modal Tabs - Theme Enhanced */
    .edit-modal-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 20px;
        background: var(--theme-tab-bg);
        padding: 6px;
        border-radius: 12px;
    }

    .edit-tab-btn {
        background: transparent;
        border: none;
        padding: 10px 20px;
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--theme-text-muted);
        cursor: pointer;
        transition: all 0.2s;
        border-radius: 10px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .edit-tab-btn.active {
        color: var(--theme-primary);
        background: var(--theme-tab-active);
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
    }

    .edit-tab-btn:hover:not(.active) {
        color: var(--theme-primary);
        background: rgba(102, 126, 234, 0.1);
    }

    .edit-tab-pane {
        display: none;
        animation: fadeIn 0.3s ease;
    }

    .edit-tab-pane.active {
        display: block;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Follow-ups & Assignment Layout */
    .tab-content-container {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        min-height: 320px;
    }

    .list-panel {
        flex: 1.2;
        min-width: 280px;
        max-height: 400px;
        overflow-y: auto;
        padding-right: 12px;
    }

    .list-panel::-webkit-scrollbar {
        width: 6px;
    }

    .list-panel::-webkit-scrollbar-track {
        background: var(--theme-border);
        border-radius: 10px;
    }

    .list-panel::-webkit-scrollbar-thumb {
        background: var(--theme-primary);
        border-radius: 10px;
        opacity: 0.5;
    }

    .list-panel::-webkit-scrollbar-thumb:hover {
        background: var(--theme-primary);
    }

    .form-panel {
        flex: 1;
        min-width: 260px;
    }

    .followup-item,
    .assignment-item {
        background: var(--theme-bg);
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px;
        border: 1px solid var(--theme-border);
        transition: all 0.25s;
        position: relative;
        overflow: hidden;
        color: var(--theme-text);
    }

    .followup-item::before,
    .assignment-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--theme-gradient);
        transform: scaleY(0);
        transition: transform 0.25s;
    }

    .followup-item:hover::before,
    .assignment-item:hover::before {
        transform: scaleY(1);
    }

    .followup-item:hover,
    .assignment-item:hover {
        border-color: var(--theme-primary);
        background: var(--theme-input-hover);
        transform: translateX(4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .followup-date {
        font-size: 0.7rem;
        color: var(--theme-primary);
        font-weight: 600;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .followup-note {
        font-size: 0.85rem;
        color: var(--theme-text);
        line-height: 1.4;
        margin-bottom: 8px;
        font-weight: 500;
    }

    .followup-status {
        font-size: 0.65rem;
        padding: 3px 10px;
        border-radius: 20px;
        font-weight: 600;
        margin-top: 6px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .status-pending {
        background: #fef3c7;
        color: #92400e;
    }

    .status-completed {
        background: #dcfce7;
        color: #166534;
    }

    .status-missed {
        background: #fee2e2;
        color: #991b1b;
    }

    .empty-state {
        text-align: center;
        color: var(--theme-text-muted);
        padding: 50px 20px;
    }

    .empty-state i {
        font-size: 48px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

    .assignment-item {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .assignment-avatar {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: var(--theme-gradient);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        font-weight: 700;
        flex-shrink: 0;
        box-shadow: 0 4px 6px rgba(102, 126, 234, 0.2);
    }

    .assignment-info {
        flex: 1;
    }

    .assignment-name {
        font-weight: 700;
        color: var(--theme-text);
        font-size: 0.85rem;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    .assignment-meta {
        font-size: 0.7rem;
        color: var(--theme-text-muted);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .current-badge {
        background: #dcfce7;
        color: #166534;
        font-size: 0.6rem;
        padding: 3px 10px;
        border-radius: 20px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .current-badge::before {
        content: '✓';
        font-size: 10px;
    }

    /* Form Panel Card - Theme Enhanced */
    .form-panel-card {
        background: var(--theme-section-bg);
        border-radius: 16px;
        padding: 18px;
        border: 1px solid var(--theme-border);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    }

    .form-panel-card h6 {
        font-size: 0.9rem;
        color: var(--theme-text);
        margin-bottom: 16px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
        padding-bottom: 8px;
        border-bottom: 2px solid var(--theme-border);
    }

    .form-panel-card h6 i {
        color: var(--theme-primary);
        font-size: 1rem;
    }

    /* Toast notifications - Theme Enhanced */
    .toast-container {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
    }

    .toast-custom {
        background: var(--theme-bg);
        border-radius: 12px;
        padding: 14px 20px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 10px;
        animation: slideIn 0.3s ease;
        border-left: 4px solid;
        font-weight: 500;
        color: var(--theme-text);
    }

    .toast-success {
        border-left-color: #22c55e;
    }

    .toast-error {
        border-left-color: #ef4444;
    }

    .toast-custom i {
        font-size: 1.2rem;
    }

    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* Loading spinner - Theme Enhanced */
    .loading-spinner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 50px;
        color: var(--theme-text-muted);
    }

    .loading-spinner .spinner-border {
        width: 2rem;
        height: 2rem;
        margin-bottom: 12px;
        border-width: 2px;
        color: var(--theme-primary);
    }

    /* Modal body/footer */
    .modal-body {
        padding: 0 24px 20px;
        max-height: 70vh;
        overflow-y: auto;
    }

    .modal-body::-webkit-scrollbar {
        width: 6px;
    }

    .modal-body::-webkit-scrollbar-track {
        background: var(--theme-border);
        border-radius: 10px;
    }

    .modal-body::-webkit-scrollbar-thumb {
        background: var(--theme-primary);
        border-radius: 10px;
    }

    .modal-footer {
        padding: 16px 24px;
        border-top: 1px solid var(--theme-border);
        background: var(--theme-footer-bg);
    }

    .modal-footer .btn {
        padding: 8px 20px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 0.85rem;
        transition: all 0.2s;
    }

    .modal-footer .btn-light {
        background: var(--theme-bg);
        border: 1px solid var(--theme-border);
        color: var(--theme-text);
    }

    .modal-footer .btn-light:hover {
        background: var(--theme-input-hover);
        transform: translateY(-1px);
    }

    .modal-footer .btn-primary {
        background: var(--theme-gradient);
        border: none;
        box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
        color: white;
    }

    .modal-footer .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    /* Buttons in tabs */
    .btn-primary {
        background: var(--theme-gradient);
        border: none;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.2s;
        color: white;
    }

    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .btn-primary:active {
        transform: translateY(0);
    }

    .btn-primary:disabled {
        opacity: 0.7;
        transform: none;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .custom-modal {
            width: 95%;
            max-width: 95%;
            margin: 0.5rem auto;
        }

        .tab-content-container {
            flex-direction: column;
        }

        .list-panel {
            border-right: none;
            padding-right: 0;
            padding-bottom: 16px;
            max-height: 280px;
        }

        .basic-info-section .col-md-3,
        .basic-info-section .col-md-4 {
            width: 100%;
        }

        .edit-modal-tabs {
            flex-direction: column;
            gap: 4px;
        }

        .edit-tab-btn {
            justify-content: flex-start;
        }

        .modal-body {
            padding: 0 16px 16px;
        }
    }

    /* Badge styles */
    .badge-priority {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
    }

    .bg-danger {
        background: #fee2e2 !important;
        color: #dc2626 !important;
    }

    .bg-warning {
        background: #fef3c7 !important;
        color: #d97706 !important;
    }

    .bg-success {
        background: #dcfce7 !important;
        color: #16a34a !important;
    }

    .bg-secondary {
        background: var(--theme-border) !important;
        color: var(--theme-text-muted) !important;
    }

    /* Animation for new items */
    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .followup-item,
    .assignment-item {
        animation: slideInLeft 0.3s ease;
    }
</style>

{{-- Toast Container --}}
<div class="toast-container" id="toastContainer"></div>

{{-- Edit Lead Modal --}}
<div class="modal fade" id="editLeadModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered custom-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title ">
                    <i class="ti ti-edit me-2 text-dark"></i>{{ __('Edit Lead') }} - <span id="editLeadName"></span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editLeadForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <input type="hidden" name="uuid" id="edit_uuid">

                    {{-- Basic Information --}}
                    <div class="basic-info-section">
                        <h6 class="fw-bold mb-2">
                            <i class="ti ti-info-circle me-1"></i>Basic Information
                        </h6>
                        <div class="row g-2">
                            <div class="col-md-4 col-sm-6">
                                <label class="form-label"><i class="ti ti-user"></i>{{ __('Full Name') }} <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="name" id="edit_name" class="form-control" required
                                    placeholder="Enter full name">
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <label class="form-label"><i class="ti ti-phone"></i>{{ __('Phone') }} <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="phone" id="edit_phone" class="form-control" required
                                    placeholder="Enter phone number">
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <label class="form-label"><i class="ti ti-mail"></i>{{ __('Email') }}</label>
                                <input type="email" name="email" id="edit_email" class="form-control"
                                    placeholder="Enter email address">
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <label class="form-label"><i
                                        class="ti ti-building"></i>{{ __('Business Name') }}</label>
                                <input type="text" name="busi_name" id="edit_busi_name" class="form-control"
                                    placeholder="Business/Company name">
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <label class="form-label"><i class="ti ti-link"></i>{{ __('Source') }}</label>
                                <select name="source" id="edit_source" class="form-select">
                                    <option value="Direct">📌 Direct</option>
                                    <option value="Website">🌐 Website</option>
                                    <option value="Social Media">📱 Social Media</option>
                                    <option value="Referral">👥 Referral</option>
                                    <option value="Email Campaign">📧 Email Campaign</option>
                                </select>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <label class="form-label"><i class="ti ti-flag"></i>{{ __('Priority') }}</label>
                                <select name="priority" id="edit_priority" class="form-select">
                                    <option value="low">🟢 Low</option>
                                    <option value="medium">🟡 Medium</option>
                                    <option value="high">🟠 High</option>
                                    <option value="urgent">🔴 Urgent</option>
                                </select>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <label class="form-label"><i class="ti ti-status-change"></i>{{ __('Status') }}</label>
                                <select name="status" id="edit_status" class="form-select">
                                    <option value="new">✨ New</option>
                                    <option value="contacted">📞 Contacted</option>
                                    <option value="on_hold">⏸️ On Hold</option>
                                    <option value="converted">✅ Converted</option>
                                    <option value="lost">❌ Lost</option>
                                    <option value="invalid">🚫 Invalid</option>
                                </select>
                            </div>
                            <div class="col-12" id="lost_reason_container" style="display: none;">
                                <label class="form-label text-danger"><i
                                        class="ti ti-alert-circle"></i>{{ __('Lost Reason') }}</label>
                                <input type="text" name="lost_reason" id="edit_lost_reason" class="form-control"
                                    placeholder="Why was this lead lost?">
                            </div>
                            <div class="col-12" id="invalid_reason_container" style="display: none;">
                                <label class="form-label text-warning"><i
                                        class="ti ti-ban"></i>{{ __('Invalid Reason') }}</label>
                                <input type="text" name="invalid_reason" id="edit_invalid_reason"
                                    class="form-control" placeholder="Why is this lead invalid?">
                            </div>
                            <div class="col-12">
                                <label class="form-label"><i
                                        class="ti ti-notes"></i>{{ __('Requirement / Notes') }}</label>
                                <textarea name="requirement" id="edit_requirement" class="form-control" rows="2"
                                    placeholder="Describe requirements..."></textarea>
                            </div>
                        </div>
                    </div>

                    {{-- Tabs --}}
                    <div class="edit-modal-tabs">
                        <button type="button" class="edit-tab-btn active" data-tab="followups">
                            <i class="ti ti-calendar-event"></i> Follow-ups
                        </button>
                        <button type="button" class="edit-tab-btn" data-tab="assignment">
                            <i class="ti ti-user-check"></i> Assignment
                        </button>
                    </div>

                    {{-- Follow-ups Tab --}}
                    <div class="edit-tab-pane active" id="tab-followups">
                        <div class="tab-content-container">
                            <div class="list-panel" id="followupsList">
                                <div class="loading-spinner">
                                    <div class="spinner-border text-primary" role="status"></div>
                                    <span class="small">Loading follow-ups...</span>
                                </div>
                            </div>
                            <div class="form-panel">
                                <div class="form-panel-card">
                                    <h6><i class="ti ti-plus-circle"></i> Add Follow-up</h6>
                                    <div class="mb-3">
                                        <label class="form-label" style="font-size: 0.7rem;"><i
                                                class="ti ti-calendar"></i>Next Follow-up Date</label>
                                        <input type="datetime-local" id="new_followup_date"
                                            class="form-control form-control-sm">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label" style="font-size: 0.7rem;"><i
                                                class="ti ti-user"></i>Contact Person</label>
                                        <input type="text" id="new_followup_contact"
                                            class="form-control form-control-sm" placeholder="Person to contact">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label" style="font-size: 0.7rem;"><i
                                                class="ti ti-message"></i>Remark / Notes</label>
                                        <textarea id="new_followup_remark" class="form-control form-control-sm" rows="2"
                                            placeholder="Enter follow-up notes..."></textarea>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label" style="font-size: 0.7rem;"><i
                                                class="ti ti-tag"></i>Type</label>
                                        <select id="new_followup_type" class="form-select form-select-sm">
                                            <option value="call">📞 Call</option>
                                            <option value="email">✉️ Email</option>
                                            <option value="meeting">🤝 Meeting</option>
                                            <option value="visit">🚗 Visit</option>
                                            <option value="other">📝 Other</option>
                                        </select>
                                    </div>
                                    <button type="button" class="btn btn-primary btn-sm w-100" id="addFollowupBtn"
                                        style="border-radius: 10px;">
                                        <i class="ti ti-plus"></i> Add Follow-up
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Assignment Tab --}}
                    <div class="edit-tab-pane" id="tab-assignment">
                        <div class="tab-content-container">
                            <div class="list-panel" id="assignmentHistory">
                                <div class="loading-spinner">
                                    <div class="spinner-border text-primary" role="status"></div>
                                    <span class="small">Loading assignments...</span>
                                </div>
                            </div>
                            <div class="form-panel">
                                <div class="form-panel-card">
                                    <h6><i class="ti ti-user-plus"></i> Assign Employee</h6>
                                    <div class="mb-3">
                                        <label class="form-label" style="font-size: 0.7rem;"><i
                                                class="ti ti-users"></i>Select Employee</label>
                                        <select id="assign_employee_uuid" class="form-select form-select-sm">
                                            <option value="">-- Select Employee --</option>
                                            @foreach ($employees as $employee)
                                                <option value="{{ $employee->uuid }}">👤 {{ $employee->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label" style="font-size: 0.7rem;"><i
                                                class="ti ti-message"></i>Reason</label>
                                        <textarea id="assignment_reason" class="form-control form-control-sm" rows="2"
                                            placeholder="Reason for assignment..."></textarea>
                                    </div>
                                    <button type="button" class="btn btn-primary btn-sm w-100"
                                        id="assignEmployeeBtn" style="border-radius: 10px;">
                                        <i class="ti ti-user-check"></i> Assign Employee
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">
                        <i class="ti ti-x"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="ti ti-device-floppy"></i> Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>


<script>
    document.addEventListener('DOMContentLoaded', function() {

        let currentLeadUuid = null;
        let isLoadingFollowups = false;
        let isLoadingAssignments = false;
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

        // ================= TOAST =================
        function showToast(message, type = 'success') {
            const container = document.getElementById('toastContainer');
            if (!container) return;

            const toast = document.createElement('div');
            toast.className = `toast-custom toast-${type}`;
            const icon = type === 'success' ? 'ti ti-check-circle' : 'ti ti-alert-circle';
            toast.innerHTML = `<i class="${icon}"></i><span>${escapeHtml(message)}</span>`;
            container.appendChild(toast);
            setTimeout(() => toast.remove(), 3000);
        }

        // ================= SAFE DATE =================
        function formatDate(dateStr) {
            if (!dateStr) return 'N/A';
            try {
                // Handle different date formats
                let date;
                if (dateStr.includes('T')) {
                    date = new Date(dateStr);
                } else if (dateStr.includes(' ')) {
                    // Handle "2026-05-04 12:02:56 PM" format
                    date = new Date(dateStr.replace(' ', 'T'));
                } else {
                    date = new Date(dateStr);
                }

                if (isNaN(date.getTime())) {
                    console.warn('Invalid date:', dateStr);
                    return 'Invalid Date';
                }
                return date.toLocaleString();
            } catch (e) {
                console.error('Date parsing error:', e);
                return 'Invalid Date';
            }
        }

        // ================= ESCAPE HTML =================
        function escapeHtml(str) {
            if (!str) return '';
            return String(str)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');
        }

        // ================= GET LEAD =================
        function getLeadData(button) {
            try {
                const leadJson = button.getAttribute('data-lead');
                if (!leadJson) return null;
                return JSON.parse(leadJson);
            } catch (e) {
                console.error('Error parsing lead data:', e);
                return null;
            }
        }

        // ================= MODAL EVENTS =================
        const editModal = document.getElementById('editLeadModal');

        if (editModal) {
            editModal.addEventListener('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const lead = getLeadData(button);

                if (!lead || !lead.uuid) {
                    console.error('No lead data found');
                    showToast('Error loading lead data', 'error');
                    return;
                }

                console.log("Opening Lead:", lead.uuid, lead.name);
                currentLeadUuid = lead.uuid;

                // CRITICAL: Clear containers IMMEDIATELY and show loading state
                const followupsContainer = document.getElementById('followupsList');
                const assignmentsContainer = document.getElementById('assignmentHistory');

                if (followupsContainer) {
                    followupsContainer.innerHTML = `
            <div class="loading-spinner">
                <div class="spinner-border text-primary" role="status"></div>
                <span class="small">Loading follow-ups...</span>
            </div>
        `;
                }

                if (assignmentsContainer) {
                    assignmentsContainer.innerHTML = `
            <div class="loading-spinner">
                <div class="spinner-border text-primary" role="status"></div>
                <span class="small">Loading assignments...</span>
            </div>
        `;
                }

                // SET FORM VALUES
                const form = document.getElementById('editLeadForm');
                if (form) form.action = `/business/lead/${lead.uuid}`;

                const nameSpan = document.getElementById('editLeadName');
                if (nameSpan) nameSpan.textContent = lead.name || 'Unknown';

                document.getElementById('edit_uuid').value = lead.uuid || '';
                document.getElementById('edit_name').value = lead.name || '';
                document.getElementById('edit_phone').value = lead.phone || '';
                document.getElementById('edit_email').value = lead.email || '';
                document.getElementById('edit_busi_name').value = lead.busi_name ||
                ''; // ← ADD THIS LINE
                document.getElementById('edit_source').value = lead.source || 'Direct';
                document.getElementById('edit_priority').value = lead.priority || 'medium';
                document.getElementById('edit_status').value = lead.status || 'new';
                document.getElementById('edit_requirement').value = lead.requirement || '';

                // Set last follow-up date if exists
                const lastFollowupInput = document.getElementById('edit_last_followup');
                if (lastFollowupInput) {
                    if (lead.last_followup_date) {
                        const lastFollowup = lead.last_followup_date.replace(' ', 'T').slice(0, 16);
                        lastFollowupInput.value = lastFollowup;
                    } else {
                        lastFollowupInput.value = '';
                    }
                }

                // Set lost/invalid reasons
                const lostReasonInput = document.getElementById('edit_lost_reason');
                const invalidReasonInput = document.getElementById('edit_invalid_reason');
                if (lostReasonInput) lostReasonInput.value = lead.lost_reason || '';
                if (invalidReasonInput) invalidReasonInput.value = lead.invalid_reason || '';

                // Assignment dropdown
                const assignSelect = document.getElementById('assign_employee_uuid');
                if (assignSelect) {
                    assignSelect.value = lead.assigned_employee?.uuid || '';
                }

                toggleReasons(lead.status);

                // Clear add follow-up form
                const newDateInput = document.getElementById('new_followup_date');
                const newRemarkInput = document.getElementById('new_followup_remark');
                const newContactInput = document.getElementById('new_followup_contact');
                const newTypeSelect = document.getElementById('new_followup_type');

                if (newDateInput) newDateInput.value = '';
                if (newRemarkInput) newRemarkInput.value = '';
                if (newContactInput) newContactInput.value = '';
                if (newTypeSelect) newTypeSelect.value = 'call';

                // Clear assignment reason
                const assignmentReason = document.getElementById('assignment_reason');
                if (assignmentReason) assignmentReason.value = '';

                // LOAD DATA (AFTER RESET) - Use setTimeout to ensure DOM is ready
                setTimeout(() => {
                    if (currentLeadUuid === lead.uuid) {
                        loadFollowups(currentLeadUuid);
                        loadAssignments(currentLeadUuid);
                    }
                }, 100);

                // Reset to first tab
                switchTab('followups');
            });

            // RESET ON CLOSE
            editModal.addEventListener('hidden.bs.modal', function() {
                currentLeadUuid = null;
                isLoadingFollowups = false;
                isLoadingAssignments = false;

                const followupsContainer = document.getElementById('followupsList');
                const assignmentsContainer = document.getElementById('assignmentHistory');

                if (followupsContainer) {
                    followupsContainer.innerHTML = `
                    <div class="loading-spinner">
                        <div class="spinner-border text-primary" role="status"></div>
                        <span class="small">Loading follow-ups...</span>
                    </div>
                `;
                }

                if (assignmentsContainer) {
                    assignmentsContainer.innerHTML = `
                    <div class="loading-spinner">
                        <div class="spinner-border text-primary" role="status"></div>
                        <span class="small">Loading assignments...</span>
                    </div>
                `;
                }
            });
        }

        // ================= TABS =================
        function switchTab(tabId) {
            const tabBtns = document.querySelectorAll('.edit-tab-btn');
            const tabPanes = document.querySelectorAll('.edit-tab-pane');

            tabBtns.forEach(btn => {
                const btnTab = btn.getAttribute('data-tab');
                if (btnTab === tabId) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });

            tabPanes.forEach(pane => {
                const paneId = pane.id;
                if (paneId === `tab-${tabId}`) {
                    pane.classList.add('active');
                } else {
                    pane.classList.remove('active');
                }
            });
        }

        const tabButtons = document.querySelectorAll('.edit-tab-btn');
        if (tabButtons.length) {
            tabButtons.forEach(btn => {
                btn.addEventListener('click', () => {
                    const tabId = btn.getAttribute('data-tab');
                    if (tabId) switchTab(tabId);
                });
            });
        }

        // ================= STATUS UI =================
        function toggleReasons(status) {
            const lostContainer = document.getElementById('lost_reason_container');
            const invalidContainer = document.getElementById('invalid_reason_container');

            if (lostContainer) {
                lostContainer.style.display = status === 'lost' ? 'block' : 'none';
            }
            if (invalidContainer) {
                invalidContainer.style.display = status === 'invalid' ? 'block' : 'none';
            }
        }

        const statusSelect = document.getElementById('edit_status');
        if (statusSelect) {
            statusSelect.addEventListener('change', function() {
                toggleReasons(this.value);
            });
        }

        // ================= FOLLOWUPS =================
        async function loadFollowups(leadUuid) {
            // Prevent multiple simultaneous loads
            if (isLoadingFollowups) {
                console.log('Followups already loading, skipping');
                return;
            }

            const container = document.getElementById('followupsList');
            if (!container) {
                console.error('Followups container not found');
                return;
            }

            isLoadingFollowups = true;

            try {
                console.log('Fetching followups for:', leadUuid);
                const res = await fetch(`/business/lead/${leadUuid}/followups`, {
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });

                if (!res.ok) {
                    throw new Error(`HTTP ${res.status}: ${res.statusText}`);
                }

                let data = await res.json();
                console.log('Followups API response:', data);

                // CRITICAL: Handle different response formats
                let followups = [];
                if (data && data.data && Array.isArray(data.data)) {
                    // Laravel resource collection format
                    followups = data.data;
                } else if (data && Array.isArray(data)) {
                    // Direct array format
                    followups = data;
                } else if (data && typeof data === 'object') {
                    // Maybe it's wrapped in another property
                    console.warn('Unexpected data format:', data);
                    followups = [];
                }

                if (!followups || followups.length === 0) {
                    container.innerHTML = `
                    <div class="empty-state">
                        <i class="ti ti-calendar-off fs-4 mb-2"></i>
                        <p class="mb-0 small">No follow-ups yet</p>
                        <small>Add your first follow-up using the form</small>
                    </div>
                `;
                    return;
                }

                // Build HTML with proper styling
                let html = '';
                for (const f of followups) {
                    // Determine status class and text
                    let statusClass = 'status-pending';
                    let statusText = 'Pending';

                    if (f.status === 'completed') {
                        statusClass = 'status-completed';
                        statusText = 'Completed';
                    } else if (f.status === 'missed') {
                        statusClass = 'status-missed';
                        statusText = 'Missed';
                    }

                    const formattedDate = formatDate(f.next_follow_up_at);
                    const safeRemark = escapeHtml(f.remark || 'No notes');
                    const safeContact = escapeHtml(f.contact_person);
                    const safeType = escapeHtml(f.type);

                    html += `
                    <div class="followup-item">
                        <div class="followup-date">
                            <i class="ti ti-calendar"></i> ${formattedDate}
                        </div>
                        <div class="followup-note">${safeRemark}</div>
                        ${safeContact ? `<small class="text-muted"><i class="ti ti-user"></i> ${safeContact}</small><br>` : ''}
                        <div class="mt-1">
                            <span class="followup-status ${statusClass}">${statusText}</span>
                            ${safeType ? `<span class="followup-status ms-1" style="background: #e0e7ff; color: #3730a3;">${safeType}</span>` : ''}
                        </div>
                    </div>
                `;
                }

                container.innerHTML = html;

            } catch (e) {
                console.error('Error loading follow-ups:', e);
                container.innerHTML = `
                <div class="empty-state text-danger">
                    <i class="ti ti-alert-circle fs-4 mb-2"></i>
                    <p class="mb-0 small">Error loading follow-ups</p>
                    <small>${escapeHtml(e.message)}</small>
                    <button type="button" class="btn btn-sm btn-outline-danger mt-2" onclick="location.reload()">
                        <i class="ti ti-refresh"></i> Retry
                    </button>
                </div>
            `;
            } finally {
                isLoadingFollowups = false;
            }
        }

        // ================= ADD FOLLOWUP =================
        const addFollowupBtn = document.getElementById('addFollowupBtn');
        if (addFollowupBtn) {
            addFollowupBtn.addEventListener('click', async () => {
                if (!currentLeadUuid) {
                    showToast('No lead selected', 'error');
                    return;
                }

                const dateInput = document.getElementById('new_followup_date');
                const remarkInput = document.getElementById('new_followup_remark');
                const contactInput = document.getElementById('new_followup_contact');
                const typeSelect = document.getElementById('new_followup_type');

                const payload = {
                    next_follow_up_at: dateInput ? dateInput.value : '',
                    remark: remarkInput ? remarkInput.value : '',
                    contact_person: contactInput ? contactInput.value : '',
                    type: typeSelect ? typeSelect.value : 'call'
                };

                if (!payload.next_follow_up_at) {
                    showToast('Please select a follow-up date', 'error');
                    if (dateInput) dateInput.focus();
                    return;
                }

                if (!payload.remark.trim()) {
                    showToast('Please enter remark/notes', 'error');
                    if (remarkInput) remarkInput.focus();
                    return;
                }

                // Disable button during submission
                const originalText = addFollowupBtn.innerHTML;
                addFollowupBtn.innerHTML = '<i class="ti ti-loader"></i> Adding...';
                addFollowupBtn.disabled = true;

                try {
                    const res = await fetch(`/business/lead/${currentLeadUuid}/followups`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify(payload)
                    });

                    const result = await res.json();

                    if (res.ok && (result.success || result.status === 'success')) {
                        showToast('Follow-up added successfully');

                        // Clear form
                        if (dateInput) dateInput.value = '';
                        if (remarkInput) remarkInput.value = '';
                        if (contactInput) contactInput.value = '';
                        if (typeSelect) typeSelect.value = 'call';

                        // Reload the list
                        await loadFollowups(currentLeadUuid);
                    } else {
                        showToast(result.message || result.error || 'Error adding follow-up',
                            'error');
                    }
                } catch (error) {
                    console.error('Error:', error);
                    showToast('Network error. Please try again.', 'error');
                } finally {
                    addFollowupBtn.innerHTML = originalText;
                    addFollowupBtn.disabled = false;
                }
            });
        }

        // ================= ASSIGNMENTS =================
        async function loadAssignments(leadUuid) {
            // Prevent multiple simultaneous loads
            if (isLoadingAssignments) {
                console.log('Assignments already loading, skipping');
                return;
            }

            const container = document.getElementById('assignmentHistory');
            if (!container) {
                console.error('Assignment container not found');
                return;
            }

            isLoadingAssignments = true;

            try {
                console.log('Fetching assignments for:', leadUuid);
                const res = await fetch(`/business/lead/${leadUuid}/assignments`, {
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                });

                if (!res.ok) {
                    throw new Error(`HTTP ${res.status}: ${res.statusText}`);
                }

                let data = await res.json();
                console.log('Assignments API response:', data);

                // CRITICAL: Handle different response formats
                let assignments = [];
                if (data && data.data && Array.isArray(data.data)) {
                    // Laravel resource collection format
                    assignments = data.data;
                } else if (data && Array.isArray(data)) {
                    // Direct array format
                    assignments = data;
                } else if (data && typeof data === 'object') {
                    console.warn('Unexpected data format:', data);
                    assignments = [];
                }

                if (!assignments || assignments.length === 0) {
                    container.innerHTML = `
                    <div class="empty-state">
                        <i class="ti ti-user-off fs-4 mb-2"></i>
                        <p class="mb-0 small">No assignment history</p>
                        <small>Assign this lead to an employee using the form</small>
                    </div>
                `;
                    return;
                }

                // Build HTML with proper styling
                let html = '';
                for (const a of assignments) {
                    const employeeName = a.employee_name || a.name || 'Unknown';
                    const initials = employeeName !== 'Unknown' ?
                        employeeName.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2) :
                        '?';

                    const formattedDate = formatDate(a.assigned_at || a.created_at);
                    const safeName = escapeHtml(employeeName);
                    const safeReason = escapeHtml(a.reason || a.notes || '');

                    html += `
                    <div class="assignment-item ${a.is_current ? 'border-start border-3 border-success' : ''}">
                        <div class="assignment-avatar">${escapeHtml(initials)}</div>
                        <div class="assignment-info">
                            <div class="assignment-name">
                                ${safeName}
                                ${a.is_current ? '<span class="current-badge ms-1">Current</span>' : ''}
                            </div>
                            <div class="assignment-meta">
                                <i class="ti ti-clock"></i> ${formattedDate}
                                ${safeReason ? ` | ${safeReason}` : ''}
                            </div>
                        </div>
                    </div>
                `;
                }

                container.innerHTML = html;

            } catch (e) {
                console.error('Error loading assignments:', e);
                container.innerHTML = `
                <div class="empty-state text-danger">
                    <i class="ti ti-alert-circle fs-4 mb-2"></i>
                    <p class="mb-0 small">Error loading assignments</p>
                    <small>${escapeHtml(e.message)}</small>
                    <button type="button" class="btn btn-sm btn-outline-danger mt-2" onclick="location.reload()">
                        <i class="ti ti-refresh"></i> Retry
                    </button>
                </div>
            `;
            } finally {
                isLoadingAssignments = false;
            }
        }

        // ================= ASSIGN EMPLOYEE =================
        const assignBtn = document.getElementById('assignEmployeeBtn');
        if (assignBtn) {
            assignBtn.addEventListener('click', async () => {
                if (!currentLeadUuid) {
                    showToast('No lead selected', 'error');
                    return;
                }

                const employeeSelect = document.getElementById('assign_employee_uuid');
                const reasonTextarea = document.getElementById('assignment_reason');

                const employee_uuid = employeeSelect ? employeeSelect.value : '';
                const reason = reasonTextarea ? reasonTextarea.value : '';

                if (!employee_uuid) {
                    showToast('Please select an employee', 'error');
                    if (employeeSelect) employeeSelect.focus();
                    return;
                }

                // Disable button during submission
                const originalText = assignBtn.innerHTML;
                assignBtn.innerHTML = '<i class="ti ti-loader"></i> Assigning...';
                assignBtn.disabled = true;

                try {
                    const res = await fetch(`/business/lead/${currentLeadUuid}/assign`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken,
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            employee_uuid: employee_uuid,
                            reason: reason
                        })
                    });

                    const result = await res.json();

                    if (res.ok && (result.success || result.status === 'success')) {
                        showToast('Employee assigned successfully');
                        if (reasonTextarea) reasonTextarea.value = '';
                        await loadAssignments(currentLeadUuid);
                    } else {
                        showToast(result.message || result.error || 'Error assigning employee',
                            'error');
                    }
                } catch (error) {
                    console.error('Error:', error);
                    showToast('Network error. Please try again.', 'error');
                } finally {
                    assignBtn.innerHTML = originalText;
                    assignBtn.disabled = false;
                }
            });
        }


    });
</script>