@extends('layouts.app')

@section('content')
<div class="container-fluid mt-4" style="padding-top: 70px;">
    
   <div class="row">
      <div class="col-12">
        <div class="filter-buttons-wrapper">
          <div class="filter-buttons">
              <button class="btn btn-outline-primary btn-sm filter-btn waves-effect" data-status="All" id="btn-all">
                <span class="status-text">All</span>
                <span id="count-all" class="text-dark">0</span>
              </button>
              <button class="btn btn-outline-primary btn-sm filter-btn waves-effect" data-status="New" id="btn-new">
                <span class="status-text" style="color: #2196f3;">New</span>
                <span id="count-new" class="text-dark">0</span>
              </button>
              <button class="btn btn-outline-primary btn-sm filter-btn waves-effect" data-status="Followup" id="btn-followup">
                <span class="status-text" style="color: #e91e63;">Followup</span>
                <span id="count-followup" class="text-dark">0</span>
              </button>
              <button class="btn btn-outline-primary btn-sm filter-btn waves-effect" data-status="Postponed" id="btn-postponed">
                <span class="status-text" style="color: #673ab7;">Postponed</span>
                <span id="count-postponed" class="text-dark">0</span>
              </button>
              <button class="btn btn-outline-primary btn-sm filter-btn waves-effect" data-status="On Hold" id="btn-on-hold">
                <span class="status-text" style="color: #e65100;">On Hold</span>
                <span id="count-on-hold" class="text-dark">0</span>
              </button>
              <button class="btn btn-outline-primary btn-sm filter-btn waves-effect" data-status="In Progress" id="btn-in-progress">
                <span class="status-text" style="color: #00bcd4;">In Progress</span>
                <span id="count-in-progress" class="text-dark">0</span>
              </button>
              <button class="btn btn-outline-primary btn-sm filter-btn waves-effect" data-status="Completed" id="btn-completed">
                <span class="status-text" style="color: #4caf50;">Completed</span>
                <span id="count-completed" class="text-dark">0</span>
              </button>
           </div>
       </div>
   </div>
</div>


    <div class="card">
        <div class="card-header">
            <div class="row g-2 justify-content-between align-items-center">
                <div class="col-12 col-md-auto">
                    <h5 class="mb-0">Leads</h5>
                </div>
                <div class="col-12 col-md-auto d-flex flex-wrap gap-2">
                    <button class="btn btn-primary btn-sm" id="add-new-lead" data-bs-toggle="modal" data-bs-target="#addLeadModal">
                        <i class="bi bi-plus-lg me-1"></i> Add New Lead
                    </button>
                    
                       <button class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#filterModal" id="filterBtn">
                    <i class="bi bi-funnel me-1"></i> Filter
                </button>
                    <div class="dropdown">
                        <button class="btn btn-sm btn-secondary dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown">
                            <i class="bi bi-upload me-1"></i> Export
                        </button>
                        <ul class="dropdown-menu">
                            <li><button class="dropdown-item" id="exportExcel">Excel</button></li>
                            <li><button class="dropdown-item" id="exportCSV">CSV</button></li>
                            <li><button class="dropdown-item" id="exportPDF">PDF</button></li>
                            <li><button class="dropdown-item" id="exportPrint">Print</button></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        
        <!-- Filter Modal for Leads -->
<div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
    
      <div class="modal-header">
        <h5 class="modal-title" id="filterModalLabel">Filter Leads</h5>
        <button type="button" class="custom-close" data-bs-dismiss="modal" aria-label="Close">×</button>
      </div>
      
      <div class="modal-body">
        <form id="leadFilterForm" class="row g-3">
          
          <div class="col-md-6">
            <label for="filterName" class="form-label">Name</label>
            <input type="text" id="filterName" name="name" class="form-control" placeholder="Enter Name">
          </div>

          <div class="col-md-6">
            <label for="filterEmail" class="form-label">Email</label>
            <input type="email" id="filterEmail" name="email" class="form-control" placeholder="Enter Email">
          </div>

          <div class="col-md-6">
            <label for="filterPhone" class="form-label">Phone</label>
            <input type="text" id="filterPhone" name="phone" class="form-control" placeholder="Enter Phone">
          </div>

          <div class="col-md-6">
            <label for="filterProjectName" class="form-label">Project Name</label>
            <input type="text" id="filterProjectName" name="project_name" class="form-control" placeholder="Enter Project Name">
          </div>

          <div class="col-md-6">
            <label for="filterAssignedTo" class="form-label">Assigned To</label>
            <input type="text" id="filterAssignedTo" name="assigned_to" class="form-control" placeholder="Enter Assignee Name">
          </div>

          <div class="col-md-6">
            <label for="filterStatus" class="form-label">Status</label>
            <select id="filterStatus" name="status" class="form-select">
              <option value="">-- All --</option>
              <option value="New">New</option>
              <option value="Followup">Followup</option>
              <option value="Postponed">Postponed</option>
              <option value="On Hold">On Hold</option>
              <option value="In Progress">In Progress</option>
              <option value="Completed">Completed</option>
            </select>
          </div>

          <div class="col-md-6">
            <label for="filterSource" class="form-label">Source</label>
            <input type="text" id="filterSource" name="source" class="form-control" placeholder="Enter Source">
          </div>
          
        </form>
      </div>

      <div class="modal-footer">
        <button type="button" id="applyLeadFilters" class="btn btn-danger">Apply Filters</button>
        <button type="button" id="clearLeadFilters" class="btn btn-danger">Clear Filters</button>
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

       
        

        <div class="card-body">
            <div class="row mb-3 g-2 align-items-center">
                <div class="col-12 col-md-6 d-flex flex-wrap align-items-center gap-2">
                    <label for="entries" class="show" style="margin-left: 24px;">Show</label>
                    <select id="entries" class="form-select form-select-sm" style="max-width: 100px;">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="-1">All</option>
                    </select>
                    <span class="mb-0">entries</span>
                </div>
                <div class="col-12 col-md-6 d-flex flex-wrap justify-content-md-end align-items-center gap-2">
                    <label for="search" class="form-label mb-0">Search:</label>
                   <input type="text" id="search" class="form-control form-control-sm" style="max-width: 189px; margin-right: 22px;">
                </div>
            </div>

             <div style="overflow-x:auto;">
                <table id="leadsTable" class="table table-bordered nowrap" style="width:100%">
                    <thead>
                        <tr>
                            <th class="no-sort"><input type="checkbox" id="selectAll"></th> <!-- This is your Select All checkbox -->
                            <th class="col-name">Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Project Name</th>
                            <th>Location</th>
                            <th>Lead Value</th>
                            <th>Assigned To</th>
                            <th>Status</th>
                            <th>Delay (s)</th>
                            <th>Source</th>
                            <th>Last Contact</th>
                            <th>Created At</th>
                            <th>Add Note</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach($leads as $lead)
                        <tr>
                        <td><input type="checkbox" class="rowCheckbox" value="{{ $lead->id }}"></td>
                            <td>
                                <div class="lead-name-wrapper">
                                    <div>{{ $lead->name }}</div>
                                    <div class="lead-row-actions">
                                        <a href="#" class="text-primary edit-lead-btn"
                                           data-id="{{ $lead->id }}"
                                           data-name="{{ $lead->name }}"
                                           data-email="{{ $lead->email }}"
                                           data-phone="{{ $lead->phone }}"
                                           data-project_name="{{ $lead->project_name }}"
                                           data-project_location="{{ $lead->project_location }}"
                                           data-lead_value="{{ $lead->lead_value }}"
                                           data-assigned_to="{{ $lead->assigned_to }}"
                                           data-status="{{ $lead->status }}"
                                           data-source="{{ $lead->source }}"
                                           data-project_url="{{ $lead->project_url }}"
                                           data-bs-toggle="modal"
                                           data-bs-target="#editLeadModal">
                                           Edit
                                        </a>
                                        |
                                        <a href="#" class="text-danger delete-lead-btn" data-id="{{ $lead->id }}">
                                            Delete
                                        </a>
                                    </div>
                                </div>
                            </td>

                            <td>{{ $lead->email }}</td>
                            <td>
                            {{ $lead->phone }}
                            @if(!empty($lead->phone))
                                @php
                                    $cleanPhone = preg_replace('/\D/', '', $lead->phone);
                                    if (!str_starts_with($cleanPhone, '91')) {
                                        $cleanPhone = '91' . $cleanPhone;
                                    }
                                    $message = "Hi " . $lead->name . ", welcome to Key24.in! We're happy to assist you.";
                                    $encodedMessage = urlencode($message);
                                    $waLink = "https://wa.me/{$cleanPhone}?text={$encodedMessage}";
                                @endphp
                                <a href="{{ $waLink }}" target="_blank" class="btn whatsapp-btn text-success" title="Chat on WhatsApp">
                                    <i class="fab fa-whatsapp" style="font-size: 1.4rem; margin-left: -11px;"></i>
                                </a>
                            @endif
                        </td>
                        <td>
                            <div class="project-name-wrapper">
                                <div>{{ $lead->project_name }}</div>
                                @if(!empty($lead->project_url))
                                    <a href="{{ $lead->project_url }}" target="_blank" class="project-url">
                                        {{ $lead->project_url }}
                                    </a>
                                @endif
                            </div>
                        </td>
                            <td>{{ $lead->project_location }}</td>
                            <td>{{ $lead->lead_value }}</td>
                            <td>
    @php 
        $assignedNames = array_filter(array_map('trim', explode(',', $lead->assigned_to ?? '')));
    @endphp
    <div class="member-stack">
        @foreach($assignedNames as $name)
            <span class="user-ico" data-bs-toggle="tooltip" title="{{ $name }}">
                <i class="bi bi-person-fill"></i>
            </span>
        @endforeach
    </div>
</td>
<td>
    @php
        $status = strtolower(trim($lead->status));
        $badgeClass = match($status) {
            'new' => 'new',
            'followup' => 'followup',
            'postponed' => 'postponed',
            'on hold' => 'on-hold',
            'in progress' => 'in-progress',
            'completed' => 'completed',
            default => '',
        };
    @endphp

    <div class="d-flex align-items-center gap-2">
        <button type="button" class="btn p-0 border-0 lead-status-badge-button"
            data-lead-id="{{ $lead->id }}"
            data-status="{{ ucfirst($lead->status) }}"
            data-badge-class="{{ $badgeClass }}"
            data-current-status="{{ strtolower($lead->status) }}"
            data-created-at="{{ \Carbon\Carbon::parse($lead->created_at)->timestamp }}">
            <span class="custom-badge {{ $badgeClass }} d-inline-flex align-items-center gap-1 px-2 py-1">
                {{ ucfirst($lead->status) }}
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/>
                </svg>
            </span>
        </button>

        @if($status === 'followup')
            <button type="button" class="btn btn-sm p-0 text-warning reminder-btn" title="Set Reminder"
                data-lead-id="{{ $lead->id }}"
                data-bs-toggle="modal"
                data-bs-target="#reminderModal">
                <i class="bi bi-bell-fill" style="font-size: 17px;"></i>
            </button>
        @endif
    </div>
</td>

                            <td>
                                {{ $lead->delay ? \App\Models\Lead::formatDelayStatic($lead->delay) : '-' }}
                            </td>
                            <td>{{ $lead->source }}</td>
                            <td>{{ \Carbon\Carbon::parse($lead->created_at)->diffForHumans() }}</td>
                            <td class="status-column" data-created-at="{{ \Carbon\Carbon::parse($lead->created_at)->timestamp }}">
                                {{ $lead->created_at?->diffForHumans() ?? '-' }}
                            </td>
                            <td>
                               <button class="btn btn-sm add-note-btn 
                                {{ $lead->add_note ? 'btn-view-note' : 'btn-outline-primary' }}" 
                                data-lead-id="{{ $lead->id }}" 
                                data-note="{{ $lead->add_note ?? '' }}">
                                <i class="bi {{ $lead->add_note ? 'bi-eye' : 'bi-journal-text' }} me-1"></i>
                                {{ $lead->add_note ? 'View Note' : 'Add Note' }}
                               </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
             </table>
            </div>
        </div>
        <div class="row mt-3">
                <div class="col-md-6">
                 <div class="dt-info" aria-live="polite" id="leadsTable_info" role="status" style="margin-left: 26px;"></div>
                </div>
                <div class="col-md-6">
                    <div id="projectsTable_paginate" class="dataTables_paginate paging_simple_numbers"></div>
                </div>
            </div>
        </div>
    </div>
    
    
  


    <!--status badge dropdown-->
 <div id="leadStatusDropdown" class="dropdown-menu" style="position: absolute; display: none; z-index: 9999;">
  <a class="dropdown-item change-lead-status" data-status="New">New</a>
  <a class="dropdown-item change-lead-status" data-status="Followup">Followup</a>
  <a class="dropdown-item change-lead-status" data-status="Postponed">Postponed</a>
  <a class="dropdown-item change-lead-status" data-status="On Hold">On Hold</a>
  <a class="dropdown-item change-lead-status" data-status="In Progress">In Progress</a>
  <a class="dropdown-item change-lead-status" data-status="Completed">Completed</a>
</div>


<!-- Reminder Modal -->
<div class="modal fade" id="reminderModal" tabindex="-1" aria-labelledby="reminderModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form id="reminderForm">
        @csrf
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="reminderModalLabel">Set Follow-up Reminder</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="lead_id" id="reminderLeadId">

                <div class="mb-3">
                    <label for="reminder_date" class="form-label">Reminder Date</label>
                    <input type="date" class="form-control" name="reminder_date" required>
                </div>

                <div class="mb-3">
                    <label for="reminder_time" class="form-label">Reminder Time</label>
                    <input type="time" class="form-control" name="reminder_time">
                </div>

                <div class="mb-3">
                    <label for="reminder_note" class="form-label">Note</label>
                    <textarea class="form-control" name="reminder_note" rows="3"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Save Reminder</button>
            </div>
        </div>
    </form>
  </div>
</div>



<audio id="reminderSound" src="{{ asset('assets/sounds/ding-dong-81717.mp3') }}"></audio>


          <!--Add New Lead Modal-->
  <div class="modal fade" id="addLeadModal" tabindex="-1">
    <div class="modal-dialog">
        <form id="addLeadForm" autocomplete="off">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add New Lead</h5>
                    <button type="button" class="custom-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label>Name</label>
                        <input type="text" name="name" class="form-control" required />
                    </div>
                    <div class="mb-3">
                        <label>Email</label>
                        <input type="email" name="email" class="form-control" required />
                    </div>
                    <div class="mb-3">
                        <label>Phone</label>
                        <input type="text" name="phone" class="form-control" required />
                    </div>
                    <div class="mb-3">
                        <label>Project Name</label>
                        <input type="text" name="project_name" class="form-control" required />
                    </div>
                    <div class="mb-3">
                        <label for="project_url">Project URL</label>
                        <input type="url" name="project_url" class="form-control" id="project_url" placeholder="https://example.com">
                    </div>
                    <div class="mb-3">
                        <label>Project Location</label>
                        <input type="text" name="project_location" class="form-control" required />
                    </div>
                    <div class="mb-3">
                        <label>Lead Value</label>
                        <input type="number" name="lead_value" class="form-control" />
                    </div>
                     <!-- Updated Assigned To (Dropdown with Multi-Select) -->
                    <div class="mb-3 position-relative">
                        <label class="form-label">Assigned To</label>
                        <input type="text" id="assignedToInput" name="assigned_to" class="form-control" readonly placeholder="Select team members">
                        <div id="assignedToDropdown" class="border rounded shadow-sm bg-white p-2" style="display: none; position: absolute; width: 100%; z-index: 1000;">
                            <input type="text" id="assignedToSearch" class="form-control mb-2" placeholder="Search members...">
                            <div class="d-flex gap-2 mb-2">
                                <button type="button" id="assignedToSelectAll" class="btn btn-outline-primary btn-sm">Select All</button>
                                <button type="button" id="assignedToDeselectAll" class="btn btn-outline-secondary btn-sm">Deselect All</button>
                            </div>
                            <div id="assignedToList" style="max-height: 200px; overflow-y: auto;">
                                <!-- JS will populate team members here -->
                            </div>
                        </div>
                    </div>
                     <div class="mb-3">
                        <label for="status" class="form-label">Status</label>
                        <select class="form-control" id="status" name="status">
                          <option value="New">New</option>
                          <option value="Followup">Followup</option>
                          <option value="Postponed">Postponed</option>
                          <option value="On Hold">On Hold</option>
                          <option value="In Progress">In Progress</option>
                          <option value="Completed">Completed</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label>Source</label>
                        <input type="text" name="source" class="form-control" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn custom-btn" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn custom-btn">Save Lead</button>
                </div>
            </div>
        </form>
    </div>
</div>


                <!-- Edit Lead Modal -->
    <div class="modal fade" id="editLeadModal" tabindex="-1">
        <div class="modal-dialog">
            <form id="editLeadForm">
                @csrf
                @method('PUT')
                <input type="hidden" id="edit_lead_id">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Lead</h5>
                        <button type="button" class="custom-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label>Name</label>
                            <input type="text" id="edit_name" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label>Email</label>
                            <input type="email" id="edit_email" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label>Phone</label>
                            <input type="text" id="edit_phone" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label>Project Name</label>
                            <input type="text" id="edit_project_name" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label for="project_url">Project URL</label>
                          <input type="url" id="edit_project_url" class="form-control" placeholder="https://example.com">
                        </div>
                        <div class="mb-3">
                            <label>Project Location</label>
                            <input type="text" id="edit_project_location" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label>Lead Value</label>
                            <input type="number" id="edit_lead_value" class="form-control">
                        </div>
                        <div class="mb-2 position-relative" style="max-width: 512px;">
    <label class="form-label">Assigned To</label>
    <input type="text" id="edit_assigned_to_input" class="form-control mb-4" readonly placeholder="Selected Members will appear here">
    <div id="edit_assigned_dropdown" class="border rounded shadow-sm bg-white p-2" style="display: none; position: absolute; width: 100%; z-index: 1000;">
        <input type="text" id="edit_assigned_search" class="form-control mb-2" placeholder="Search Members...">
        <div class="d-flex gap-2 mb-2">
            <button type="button" id="edit_assigned_select_all" class="btn btn-outline-primary btn-sm">Select All</button>
            <button type="button" id="edit_assigned_deselect_all" class="btn btn-outline-secondary btn-sm">Deselect All</button>
        </div>
        <div id="edit_assigned_list" style="max-height: 200px; overflow-y: auto;">
            <!-- JS will populate this -->
        </div>
    </div>
</div>

                        <div class="mb-3">
                            <label>Status</label>
                           <select id="edit_status" class="form-control">
                              <option>New</option>
                              <option>Followup</option>
                              <option>Postponed</option>
                              <option>On Hold</option>
                              <option>In Progress</option>
                              <option>Completed</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label>Source</label>
                            <input type="text" id="edit_source" class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Update Lead</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


          <!--Add Note Modal-->
<div class="modal fade" id="noteModal" tabindex="-1">
    <div class="modal-dialog">
        <form id="noteForm">
            @csrf
            <input type="hidden" id="noteLeadId">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Note</h5>
                    <button type="button" class="custom-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                </div>*x
                <div class="modal-body">
                    <textarea class="form-control" id="noteText" rows="5" placeholder="Write your note here..."></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="clearNoteBtn">Clear Note</button>
                    <button type="submit" class="btn btn-primary" id="saveNoteBtn">Save Note</button>
                </div>
            </div>
        </form>
    </div>
</div>

<a id="whatsappButton" class="btn btn-success mt-2" href="#" target="_blank" style="display: none;">
    Open WhatsApp Chat
</a>

@endsection
@section('scripts')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" referrerpolicy="no-referrer" />


<!-- DataTables Buttons Extension -->
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>

<!-- pdfmake (REQUIRED for PDF Export) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>

<!-- Buttons HTML5 export -->
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>


<script>
$(document).ready(function () {
    // Initialize DataTable
    const table = $('#leadsTable').DataTable({
        scrollX: true, // Enable horizontal scrolling
        order: [[13, 'desc']], 
        dom: 'Brtip',
        buttons: [
            {
                extend: 'excelHtml5',
                title: 'Leads',
                className: 'd-none',
                exportOptions: {
                    columns: ':not(.no-export)'
                }
            },
            {
                extend: 'csvHtml5',
                title: 'Leads',
                className: 'd-none',
                exportOptions: {
                    columns: ':not(.no-export)'
                }
            },
            {
                extend: 'pdfHtml5',
                title: 'Leads',
                className: 'd-none',
                exportOptions: {
                    columns: ':not(.no-export)'
                }
            },
            {
                extend: 'print',
                title: 'Leads',
                className: 'd-none',
                exportOptions: {
                    columns: ':not(.no-export)'
                }
            },
        ],
        pagingType: 'simple_numbers',  // For simple pagination
        pageLength: 10,
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search Leads...",
            lengthMenu: "_MENU_",
            paginate: {
                first: "First",
                last: "Last",
                next: "Next",
                previous: "Previous"
            },
            info: "Showing _START_ to _END_ of _TOTAL_ entries",
        },
        columnDefs: [
            {
            targets: 0,
            orderable: false,
            searchable: false, // also make it non-searchable
            className: 'no-sort'
            }
        ]
    });
    
    // Custom "Show entries" dropdown (working)
    $('#entries').on('change', function () {
        const length = parseInt($(this).val(), 10);
        table.page.len(length).draw();
    });
    
    // Custom search box (working)
    $('#search').on('keyup', function () {
        table.search(this.value).draw();
    });
    
    
   function getSelectedLeadIds() {
    let selectedIds = [];
    $('.rowCheckbox:checked').each(function () {
        selectedIds.push($(this).val());
    });
    return selectedIds;
}


 document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".whatsapp-launch").forEach(function (el) {
        el.addEventListener("click", function (e) {
            e.preventDefault();
            const phone = this.dataset.phone;
            const message = encodeURIComponent(this.dataset.message);
            const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);

            const link = isMobile
                ? `https://wa.me/${phone}?text=${message}`
                : `https://web.whatsapp.com/send?phone=${phone}&text=${message}`;

            window.open(link, '_blank');
        });
    });
});


function exportWithSelection(route, fileName) {
    const selectedIds = getSelectedLeadIds();
    
    $.ajax({
        url: route,
        method: 'POST',
        data: {
            ids: selectedIds,
            _token: '{{ csrf_token() }}'
        },
        xhrFields: {
            responseType: 'blob'
        },
        success: function (data) {
            const blob = new Blob([data], { type: 'application/pdf' });
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            a.remove();
        },
        error: function () {
            alert('Failed to export file.');
        }
    });
}

// For PDF 
$('#exportPDF').on('click', function () {
    exportWithSelection('{{ route("leads.export.pdf") }}', 'leads.pdf');
});

// For Excel/CSV/Print 
function triggerTableExport(buttonClass) {
    const selectedIds = getSelectedLeadIds();
    
    if (selectedIds.length > 0) {
        table.rows().deselect();
        table.rows().every(function () {
            const checkbox = $(this.node()).find('.rowCheckbox');
            if (selectedIds.includes(checkbox.val())) {
                this.select();
            }
        });
    }
    
    table.button(buttonClass).trigger();
}

    // Excel/CSV/Print
    $('#exportExcel').on('click', function () {
        triggerTableExport('.buttons-excel');
    });
    $('#exportCSV').on('click', function () {
        triggerTableExport('.buttons-csv');
    });
    $('#exportPrint').on('click', function () {
        triggerTableExport('.buttons-print');
    });


    
 $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$('#addLeadForm').off('submit').on('submit', function (e) {
    e.preventDefault();

    let $submitButton = $('#addLeadForm button[type="submit"]');
    $submitButton.prop('disabled', true).text('Saving...');

    let formData = new FormData(this);

    // 🔥 Correct assigned_to field: use assignedSelected Set
    let assignedToVal = Array.from(assignedSelected);  // use your JS multi-select Set
    formData.set('assigned_to', assignedToVal.join(','));  // ensure it's a string

    $.ajax({
        url: '{{ route("leads.store") }}',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
            $submitButton.prop('disabled', false).text('Save');

            // 🔥 Updated success check 🔥
            if (response && response.lead) {  // check if response.lead exists
                $('#addLeadModal').modal('hide');
                $('#addLeadForm')[0].reset();

                // Clear the selected assigned members
                assignedSelected.clear();
                updateAssignedInput();
                renderAssignedList();

                // Convert assigned_to string into formatted HTML
                const assignedNames = (response.lead.assigned_to || '').split(',')
                    .map(name => name.trim())
                    .filter(name => name !== '');
                
                let assignedHtml = '<div class="member-stack">';
                assignedNames.forEach(name => {
                    assignedHtml += `
                        <span class="user-ico" data-bs-toggle="tooltip" title="${name}">
                            <i class="bi bi-person-fill"></i>
                        </span>`;
                });
                assignedHtml += '</div>';

                // Add the new row to the DataTable
                table.row.add([
                    `<input type="checkbox" class="rowCheckbox" value="${response.lead.id}">`,
                    `<div class="lead-name-wrapper">
                        <div>${response.lead.name}</div>
                        <div class="lead-row-actions">
                            <a href="#" class="text-primary">Edit</a> |
                            <a href="#" class="text-danger delete-lead-btn" data-id="${response.lead.id}">Delete</a>
                        </div>
                    </div>`,
                    response.lead.email,
                    response.lead.phone,
                    response.lead.project_name,
                    response.lead.project_location,
                    response.lead.lead_value ?? '',
                    assignedHtml,
                    `<span class="badge badge-status badge-status-${(response.lead.status || '').toLowerCase()}">${response.lead.status ?? ''}</span>`,
                    'N/A',
                    response.lead.source ?? '',
                    response.lead.last_contact ?? '',
                    response.lead.created_at ?? '',
                    `<a href="#" class="text-primary">Add Note</a>`
                ]).order([12, 'desc']).draw();

                alert("Lead added successfully!");  // ✅ Now it will always show!
            } else {
                alert("Failed to add lead.");  // fallback if response is unexpected
            }
        },
        error: function (xhr) {
            $submitButton.prop('disabled', false).text('Save');
            if (xhr.responseJSON && xhr.responseJSON.errors) {
                let errorMessages = Object.values(xhr.responseJSON.errors)
                    .map(errArr => errArr.join(', '))
                    .join('\n');
                alert(errorMessages);
            } else {
                alert("Something went wrong while adding the lead.");
            }
        }
    });
});


      // Handle "Select All" checkbox
    $('#selectAll').on('change', function () {
        const isChecked = $(this).prop('checked');
        // Update to use the correct class 'checkbox-item'
        $('#leadsTable .rowCheckbox').prop('checked', isChecked);
    });
    
    // Handle individual row checkbox change
    $('#leadsTable').on('change', '.rowCheckbox', function () {
        // Check if all checkboxes are selected
        const allChecked = $('#leadsTable .rowCheckbox:checked').length === $('#leadsTable .rowCheckbox').length;
        $('#selectAll').prop('checked', allChecked);
    });
    
    
    
    // Open modal with data
    $(document).on('click', '.add-note-btn', function () {
        const leadId = $(this).data('lead-id');
        const note = $(this).data('note');
    
        $('#noteLeadId').val(leadId);
        $('#noteText').val(note);
        $('#noteModal').modal('show');
    });
    
    // Save note
    $('#noteForm').on('submit', function (e) {
        e.preventDefault();
        const leadId = $('#noteLeadId').val();
        const note = $('#noteText').val();
    
        console.log("Saving note for lead ID:", leadId, "with note:", note); // Debugging
    
        $.ajax({
            url: `/leads/${leadId}/note`,
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                note: note
            },
            success: function (response) {
                console.log(response); // Debugging
                $(`button[data-lead-id="${leadId}"]`).data('note', note);
                $('#noteModal').modal('hide');
            },
            error: function (err) {
                console.error(err);
                alert('Failed to save note.');
            }
        });
    });

    // Clear note
    $('#clearNoteBtn').on('click', function () {
        const leadId = $('#noteLeadId').val();
        
        $.ajax({
            url: `/leads/${leadId}/clear-note`,  // This route should point to your clear note controller method
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
            },
            success: function (response) {
                if (response.success) {
                    $('#noteText').val('');  // Clear the modal field
                    $(`button[data-lead-id="${leadId}"]`).data('note', ''); // Update the button data
                    alert(response.message);  // Optionally show a success message
                } else {
                    alert('Failed to clear the note');
                }
            },
            error: function () {
                alert('Error clearing the note');
            }
        });
    });
    
    
    
  // Prefill modal on Edit click
$('#leadsTable').on('click', '.edit-lead-btn', function () {
    const btn = $(this);
    $('#edit_lead_id').val(btn.data('id'));
    $('#edit_name').val(btn.data('name'));
    $('#edit_email').val(btn.data('email'));
    $('#edit_phone').val(btn.data('phone'));
    $('#edit_project_name').val(btn.data('project_name'));
    $('#edit_project_location').val(btn.data('project_location'));
    $('#edit_lead_value').val(btn.data('lead_value'));
    $('#edit_project_url').val(btn.data('project_url'));
    $('#edit_source').val(btn.data('source'));

    // Populate Status dropdown
    const statusValue = btn.data('status')?.toLowerCase().trim();
    $('#edit_status option').each(function() {
        if ($(this).text().toLowerCase().trim() === statusValue) {
            $('#edit_status').val($(this).val());
        }
    });

    // Handle Assigned To (multi-select)
    const assignedToString = btn.data('assigned_to') || '';
populateAssignedTo(assignedToString);


 // Populate Members
                $('#edit_assigned_to_input').val(data.members);
                // TODO: Render checkboxes inside #edit_memberList
    // Show the modal
    $('#editLeadModal').modal('show');
});

// Submit Edit
$('#editLeadForm').on('submit', function (e) {
    e.preventDefault();

    const id = $('#edit_lead_id').val();
    const data = {
        _token: '{{ csrf_token() }}',
        _method: 'PUT',
        name: $('#edit_name').val(),
        email: $('#edit_email').val(),
        phone: $('#edit_phone').val(),
        project_name: $('#edit_project_name').val(),
        project_url: $('#edit_project_url').val(),
        project_location: $('#edit_project_location').val(),
        lead_value: $('#edit_lead_value').val(),
       assigned_to: $('#edit_assigned_to_input').val(), // comma-separated string from your readonly input
        status: $('#edit_status').val(),
        source: $('#edit_source').val()
    };

    $.ajax({
        url: `/leads/${id}`,
        type: 'POST',
        data: data,
        success: function (response) {
            $('#editLeadModal').modal('hide');
            alert(response.message);
            location.reload();
        },
        error: function (xhr) {
    console.error(xhr.responseText); // Logs the full error response
    alert(`An error occurred while updating the lead:\n\n${xhr.responseText}`);
}

    });
});

    // Delete Lead
    $('#leadsTable').on('click', '.delete-lead-btn', function (e) {
        e.preventDefault();
        const id = $(this).data('id');
    
        if (confirm('Are you sure you want to delete this lead?')) {
            $.ajax({
                url: `/leads/${id}`,
                type: 'POST',
                data: {
                    _method: 'DELETE',
                    _token: '{{ csrf_token() }}'
                },
                success: function () {
                    location.reload();
                },
                error: function () {
                    alert('Delete failed');
                }
            });
        }
    });

    // status badge dropdown
    $(document).ready(function() {
        let currentLeadId = null; // Store lead ID when button is clicked
    
        // Show dropdown when lead badge button clicked
        $(document).on('click', '.lead-status-badge-button', function(e) {
            e.preventDefault();
    
            const offset = $(this).offset();
            const height = $(this).outerHeight();
    
            currentLeadId = $(this).data('lead-id'); // Set current lead ID
    
            $('#leadStatusDropdown').css({
                top: offset.top + height,
                left: offset.left,
                display: 'block'
            });
        });
    
        // Hide dropdown if click outside
        $(document).on('click', function(e) {
            if (!$(e.target).closest('.lead-status-badge-button, #leadStatusDropdown').length) {
                $('#leadStatusDropdown').hide();
            }
        });
    
        // When user selects a new status
        $(document).on('click', '.change-lead-status', function(e) {
            e.preventDefault();
    
            if (!currentLeadId) {
                alert('Lead ID missing.');
                return;
            }
    
            let newStatus = $(this).data('status');
            let csrfToken = $('meta[name="csrf-token"]').attr('content'); // Always get token
    
            $.ajax({
                url: '/leads/' + currentLeadId + '/status',
                type: 'POST',
                data: {
                    _token: csrfToken,
                    status: newStatus
                },
                success: function(response) {
                    if (response.success) {
                        location.reload(); // Or dynamically update badge
                    } else {
                        alert('Failed to update lead status.');
                    }
                },
                error: function() {
                    alert('Error occurred while updating lead status.');
                }
            });
    
            $('#leadStatusDropdown').hide(); // Hide dropdown after selection
        });
    });
    
    //filter buttons
    // Function to update the status counts
    function updateLeadsStatusCount() {
        let newCount = 0;
        let followupCount = 0;
        let postponedCount = 0;
        let onHoldCount = 0;
        let inProgressCount = 0;
        let completedCount = 0;
        let allCount = 0;
    
        // Loop through all rows (without filtering)
       table.rows().every(function () {
            var data = this.data();
            var status = data[8].toLowerCase();
            allCount++;
        
            if (status.includes('new')) {
                newCount++;
            } else if (status.includes('followup')) {
                followupCount++;
            } else if (status.includes('postponed')) {
                postponedCount++;
            } else if (status.includes('on hold')) {
                onHoldCount++;
            } else if (status.includes('in progress')) {
                inProgressCount++;
            } else if (status.includes('completed')) {
                completedCount++;
            }
        });
    
        // Update UI counts
        $('#count-new').text(newCount);
        $('#count-followup').text(followupCount);
        $('#count-postponed').text(postponedCount);
        $('#count-on-hold').text(onHoldCount);
        $('#count-in-progress').text(inProgressCount);
        $('#count-completed').text(completedCount);
        $('#count-all').text(allCount);

        // Update count on the "All" button
        $('#count-all').text(allCount); // Display the total count in the "All" button
    }
    
    // Function to filter leads by status
    function filterLeadsByStatus(status) {
        if (status === 'All') {
            table.column(8).search('').draw(); // Reset the search if "All" is clicked
        } else {
            table.column(8).search(status).draw(); // Filter by status
        }
        updateLeadsStatusCount(); // Always update counts after filtering
    }
    
    // Button click event for each status filter button
    $('.filter-btn').on('click', function () {
        var status = $(this).data('status');
        filterLeadsByStatus(status); // Apply the filter and update counts
    });
    
    // Show all filter buttons when the "All" button is clicked
    $('#btn-all').on('click', function () {
        // Show all filter buttons again when "All" is clicked
        $('.filter-btn').removeClass('d-none'); // Show all buttons, remove the 'd-none' class
        updateLeadsStatusCount(); // Always update counts after the "All" button click
    });
    
    
    // Initial call to update the status counts when the page loads
    updateLeadsStatusCount();
    
   
   
   //Delay according to status 
    $('.status-dropdown').on('change', function () {
        const leadId = $(this).data('lead-id');
        const newStatus = $(this).val();
    
        const $badge = $(`.lead-status-badge-button[data-lead-id="${leadId}"]`);
        const currentStatus = $badge.data('current-status');
        const createdAt = parseInt($badge.data('created-at')); // in seconds
        const now = Math.floor(Date.now() / 1000); // in seconds
        let delay = null;
    
        // ✅ Only calculate delay if changing from "New" to another status
        if (currentStatus.toLowerCase() === 'new' && newStatus.toLowerCase() !== 'new') {
            if (!isNaN(createdAt) && createdAt > 1000000000 && createdAt <= now) {
                delay = now - createdAt;
            }
        }
    
        $.ajax({
            url: '/leads/update-status',
            method: 'POST',
            data: {
                lead_id: leadId,
                status: newStatus,
                delay: delay, // only sent if valid
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {
                if (response.success) {
                    // ✅ Update the badge status and its attributes
                    $badge.text(newStatus.charAt(0).toUpperCase() + newStatus.slice(1));
                    $badge.data('current-status', newStatus);
                    alert('Lead status updated successfully.');
                } else {
                    alert('Error occurred while updating lead status.');
                }
            },
            error: function(xhr) {
        console.error("XHR Error:", xhr);
        alert('Error occurred while updating lead status: ' + xhr.responseText);
    }
    
        });
    });
    
    
 // Apply filters and save to localStorage
$('#applyLeadFilters').on('click', function () {
    let name = $('#filterName').val().trim();
    let email = $('#filterEmail').val().trim();
    let phone = $('#filterPhone').val().trim();
    let projectName = $('#filterProjectName').val().trim();
    let assignedTo = $('#filterAssignedTo').val().trim();
    let status = $('#filterStatus').val().trim();
    let source = $('#filterSource').val().trim();

    // Save to localStorage
    localStorage.setItem('leadFilterName', name);
    localStorage.setItem('leadFilterEmail', email);
    localStorage.setItem('leadFilterPhone', phone);
    localStorage.setItem('leadFilterProjectName', projectName);
    localStorage.setItem('leadFilterAssignedTo', assignedTo);
    localStorage.setItem('leadFilterStatus', status);
    localStorage.setItem('leadFilterSource', source);

    // Apply filters to DataTable (adjust column indexes if needed)
    table.columns(1).search(name);         // Name
    table.columns(2).search(email);        // Email
    table.columns(3).search(phone);        // Phone
    table.columns(4).search(projectName);  // Project Name
    table.columns(7).search(assignedTo);   // Assigned To
    table.columns(8).search(status);       // Status
    table.columns(10).search(source);      // Source

    table.draw();
    $('#filterModal').modal('hide'); // ✅ Correct ID
});

// Clear filters and localStorage
$('#clearLeadFilters').on('click', function () {
    $('#leadFilterForm')[0].reset();

    table.columns().search('').draw();

    localStorage.removeItem('leadFilterName');
    localStorage.removeItem('leadFilterEmail');
    localStorage.removeItem('leadFilterPhone');
    localStorage.removeItem('leadFilterProjectName');
    localStorage.removeItem('leadFilterAssignedTo');
    localStorage.removeItem('leadFilterStatus');
    localStorage.removeItem('leadFilterSource');

    $('#filterModal').modal('hide'); // ✅ Correct ID
});

// On page load, re-apply filters
$(document).ready(function () {
    let name = localStorage.getItem('leadFilterName') || '';
    let email = localStorage.getItem('leadFilterEmail') || '';
    let phone = localStorage.getItem('leadFilterPhone') || '';
    let projectName = localStorage.getItem('leadFilterProjectName') || '';
    let assignedTo = localStorage.getItem('leadFilterAssignedTo') || '';
    let status = localStorage.getItem('leadFilterStatus') || '';
    let source = localStorage.getItem('leadFilterSource') || '';

    $('#filterName').val(name);
    $('#filterEmail').val(email);
    $('#filterPhone').val(phone);
    $('#filterProjectName').val(projectName);
    $('#filterAssignedTo').val(assignedTo);
    $('#filterStatus').val(status);
    $('#filterSource').val(source);

    table.columns(1).search(name);
    table.columns(2).search(email);
    table.columns(3).search(phone);
    table.columns(4).search(projectName);
    table.columns(7).search(assignedTo);
    table.columns(8).search(status);
    table.columns(10).search(source);

    table.draw();
});


const assignedMembers = [
    "Wasim Sayyed", "Sumit Mandal", "Shaheen Khan",
    "Sakshi Pisal", "Priyanka Chorat", "Komal Borse", "Atul Bhilare"
];

const assignedSelected = new Set();
const assignedInput = document.getElementById("assignedToInput");
const assignedDropdown = document.getElementById("assignedToDropdown");
const assignedList = document.getElementById("assignedToList");
const assignedSearch = document.getElementById("assignedToSearch");
const assignedHiddenInput = document.getElementById("assigned_to"); // hidden input

function updateAssignedInput() {
    const assignedArray = Array.from(assignedSelected);
    assignedInput.value = assignedArray.join(", ");
    assignedHiddenInput.value = assignedArray.join(","); // update hidden input here
}

function renderAssignedList(filter = "") {
    assignedList.innerHTML = "";
    assignedMembers.forEach(name => {
        if (name.toLowerCase().includes(filter.toLowerCase())) {
            const memberDiv = document.createElement("div");
            memberDiv.classList.add("member-item");

            const nameSpan = document.createElement("span");
            nameSpan.textContent = name;

            const checkmarkSpan = document.createElement("span");
            checkmarkSpan.textContent = "✔";
            checkmarkSpan.style.marginLeft = "10px";
            checkmarkSpan.style.color = "green";

            memberDiv.appendChild(nameSpan);
            memberDiv.appendChild(checkmarkSpan);

            memberDiv.addEventListener("click", () => {
                if (assignedSelected.has(name)) {
                    assignedSelected.delete(name);
                    checkmarkSpan.style.display = "none";
                } else {
                    assignedSelected.add(name);
                    checkmarkSpan.style.display = "inline";
                }
                updateAssignedInput();
            });

            if (assignedSelected.has(name)) {
                checkmarkSpan.style.display = "inline";
            } else {
                checkmarkSpan.style.display = "none";
            }

            assignedList.appendChild(memberDiv);
        }
    });
}

document.getElementById("assignedToSelectAll").addEventListener("click", () => {
    assignedMembers.forEach(name => assignedSelected.add(name));
    updateAssignedInput();
    renderAssignedList(assignedSearch.value);
});

document.getElementById("assignedToDeselectAll").addEventListener("click", () => {
    assignedSelected.clear();
    updateAssignedInput();
    renderAssignedList(assignedSearch.value);
});

assignedSearch.addEventListener("input", () => {
    renderAssignedList(assignedSearch.value);
});

assignedInput.addEventListener("click", () => {
    assignedDropdown.style.display = assignedDropdown.style.display === "none" ? "block" : "none";
});

// Close dropdown when clicking outside
document.addEventListener("click", (event) => {
    const insideDropdown = assignedDropdown.contains(event.target);
    const clickedInput = event.target === assignedInput;
    if (!insideDropdown && !clickedInput) {
        assignedDropdown.style.display = "none";
    }
});

// Initial render
renderAssignedList();



const editAssignedMembers = [
    "Wasim Sayyed", "Sumit Mandal", "Shaheen Khan", "Sakshi Pisal", "Priyanka Chorat", "Komal Borse", "Atul Bhilare"
];

const editAssignedSelected = new Set();
const editAssignedInput = document.getElementById("edit_assigned_to_input");
const editAssignedDropdown = document.getElementById("edit_assigned_dropdown");
const editAssignedListDiv = document.getElementById("edit_assigned_list");
const editAssignedSearchInput = document.getElementById("edit_assigned_search");

function updateEditAssignedInput() {
    editAssignedInput.value = Array.from(editAssignedSelected).join(", ");
}

function renderEditAssignedList(filter = "") {
    editAssignedListDiv.innerHTML = "";
    editAssignedMembers.forEach(name => {
        if (name.toLowerCase().includes(filter.toLowerCase())) {
            const memberDiv = document.createElement("div");
            memberDiv.classList.add("member-item");
            const nameSpan = document.createElement("span");
            nameSpan.textContent = name;
            const checkmarkSpan = document.createElement("span");
            checkmarkSpan.textContent = "✔";
            checkmarkSpan.style.marginLeft = "8px";
            checkmarkSpan.style.display = editAssignedSelected.has(name) ? "inline" : "none";

            memberDiv.appendChild(nameSpan);
            memberDiv.appendChild(checkmarkSpan);

            memberDiv.addEventListener("click", () => {
                if (editAssignedSelected.has(name)) {
                    editAssignedSelected.delete(name);
                    checkmarkSpan.style.display = "none";
                } else {
                    editAssignedSelected.add(name);
                    checkmarkSpan.style.display = "inline";
                }
                updateEditAssignedInput();
            });

            editAssignedListDiv.appendChild(memberDiv);
        }
    });
}

document.getElementById("edit_assigned_select_all").addEventListener("click", () => {
    editAssignedMembers.forEach(name => editAssignedSelected.add(name));
    updateEditAssignedInput();
    renderEditAssignedList(editAssignedSearchInput.value);
});

document.getElementById("edit_assigned_deselect_all").addEventListener("click", () => {
    editAssignedSelected.clear();
    updateEditAssignedInput();
    renderEditAssignedList(editAssignedSearchInput.value);
});

editAssignedSearchInput.addEventListener("input", () => {
    renderEditAssignedList(editAssignedSearchInput.value);
});

editAssignedInput.addEventListener("click", () => {
    editAssignedDropdown.style.display = editAssignedDropdown.style.display === "none" ? "block" : "none";
});

// Hide dropdown when clicking outside
document.addEventListener("click", (e) => {
    const clickedInside = editAssignedDropdown.contains(e.target);
    const clickedInput = e.target === editAssignedInput;
    if (!clickedInside && !clickedInput) {
        editAssignedDropdown.style.display = "none";
    }
});

// 🔥 Function to pre-fill with previous selection
function populateAssignedTo(assignedStr) {
    editAssignedSelected.clear();
    if (assignedStr) {
        assignedStr.split(",").forEach(name => {
            const trimmed = name.trim();
            if (trimmed) editAssignedSelected.add(trimmed);
        });
    }
    updateEditAssignedInput();
    renderEditAssignedList();
}

// Initial render (in case you want it shown blank)
renderEditAssignedList();


 $(document).on('click', '.reminder-btn', function () {
        const leadId = $(this).data('lead-id');
        $('#reminderLeadId').val(leadId);
    });

    $('#reminderForm').submit(function(e) {
        e.preventDefault();

        $.ajax({
            url: '{{ route("leads.setReminder") }}',
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                alert('Reminder saved successfully');
                $('#reminderModal').modal('hide');
            },
            error: function() {
                alert('Failed to save reminder');
            }
        });
    });
    
     // 🔔 Play sound function
    function playReminderSound() {
        const audio = new Audio('/sounds/ding-dong-81717.mp3'); // Save reminder.mp3 in public/sounds/
        audio.play();
    }

    // ⏰ Check reminders every 30 seconds
    setInterval(function () {
        const now = new Date();
        const currentDate = now.toISOString().split('T')[0];
        const currentTime = now.toTimeString().split(' ')[0].substring(0, 5);

        @foreach($leads as $lead)
            @if($lead->reminder_date && $lead->reminder_time)
                if ("{{ $lead->reminder_date }}" === currentDate && "{{ $lead->reminder_time }}" === currentTime) {
                    playReminderSound();
                    console.log("Reminder for Lead ID: {{ $lead->id }}");
                }
            @endif
        @endforeach
    }, 30000);

    // Prefill reminder modal when icon is clicked
    $('.reminder-btn').click(function () {
        const leadId = $(this).data('lead-id');
        $('#reminderLeadId').val(leadId);

        const lead = @json($leads->keyBy('id'));

        if (lead[leadId]) {
            $('input[name="reminder_date"]').val(lead[leadId].reminder_date || '');
            $('input[name="reminder_time"]').val(lead[leadId].reminder_time || '');
            $('textarea[name="reminder_note"]').val(lead[leadId].reminder_note || '');
        }
    });

    // Save reminder
    $('#reminderForm').submit(function (e) {
        e.preventDefault();

        $.ajax({
            url: '{{ route("leads.setReminder") }}',
            type: 'POST',
            data: $(this).serialize(),
            success: function () {
                alert('Reminder saved successfully');
                location.reload();
            },
            error: function () {
                alert('Failed to save reminder');
            }
        });
    });

    
    
 const reminderSound = document.getElementById('reminderSound');
const triggered = new Set(); // Prevent multiple plays per reminder

function pad(num) {
    return num.toString().padStart(2, '0');
}

function checkExactReminders() {
    const now = new Date();
    const currentDate = now.toISOString().split('T')[0]; // yyyy-mm-dd
    const currentTime = `${pad(now.getHours())}:${pad(now.getMinutes())}`; // HH:mm 24hr

    const leads = @json($leads);

    leads.forEach(lead => {
        if (
            lead.status && lead.status.toLowerCase() === 'followup' &&
            lead.reminder_date === currentDate &&
            lead.reminder_time === currentTime &&
            !triggered.has(lead.id)
        ) {
            triggered.add(lead.id);

            // Play the reminder sound exactly once per reminder
            reminderSound.play().catch(() => {});

            // Animate bell icon if present
            const bellIcon = document.querySelector(`.reminder-btn[data-lead-id="${lead.id}"] i`);
            if (bellIcon) {
                bellIcon.classList.add('reminder-animate');
            }

            console.log(`🔔 Reminder: Lead #${lead.id} at ${currentTime}`);
        }
    });
}

// Check every 30 seconds to catch the exact minute
setInterval(checkExactReminders, 30000);

// Unlock audio autoplay on first user interaction (click anywhere)
$(document).ready(() => {
    document.body.addEventListener('click', function enableSound() {
        reminderSound.play().catch(() => {});
        document.body.removeEventListener('click', enableSound);
    });
});


    });
   
    
    </script>
    @endsection