@extends('layouts.app')

@section('content')

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-title-box head">
                <h1 class="page-title" style="margin-bottom: 32px; margin-left: 40px;">Leads</h1>
                <button class="btn btn-secondary dropdown-toggle" type="button" id="exportButton" data-toggle="dropdown" aria-expanded="false">
                    Export
                  </button>
                  <div class="dropdown-menu">
                      <a class="dropdown-item" href="{{ route('export.leads', ['type' => 'excel']) }}">Excel</a>
                      <a class="dropdown-item" href="{{ route('export.leads', ['type' => 'csv']) }}">CSV</a>
                      <a class="dropdown-item" href="{{ route('export.leads', ['type' => 'pdf']) }}">PDF</a>
                      <a class="dropdown-item" href="#" onclick="printLeads()">Print</a>
                  </div>
                  <button class="new-lead" data-bs-toggle="modal" data-bs-target="#addLeadModal">  {{-- New Lead button --}}
                    + New Lead
                </button>
            </div>
        </div>
    </div>

   
    <!-- Filter Buttons Section (below Leads title) -->
<div class="row">
    <div class="col-12">
        <div class="filter-btn" id="status-btn" style="display: flex; gap: 10px; margin-bottom: 20px; margin-left: 37px;">
            <button class="new-btn">New (<span id="new-count">0</span>)</button>
            <button class="complete-btn">Complete (<span id="complete-count">0</span>)</button>
            <button class="postponed-btn">Postponed (<span id="postponed-count">0</span>)</button>
            <button class="followup-btn">Follow Up (<span id="followup-count">0</span>)</button>
            <button class="customer-btn">Customer (<span id="customer-count">0</span>)</button>
        </div>
    </div>
</div>

                           {{-- Edit Modal --}}
    <div class="modal fade" id="editLeadModal" tabindex="-1" aria-labelledby="editLeadModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editLeadModalLabel">Edit Lead</h5>
                    <button type="button" class="btn" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fa-solid fa-xmark" style="font-size: 22px;"></i>
                    </button>                    
                </div>
                <div class="modal-body">
                    <form id="editLeadForm">
                        @csrf
                        <input type="hidden" id="leadId" name="leadId">
                        <input type="hidden" name="_method" value="PUT"> 
                        <div class="mb-3">
                            <label for="leadName" class="form-label">Name</label>
                            <input type="text" class="form-control" id="leadName" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="leadCompany" class="form-label">Company</label>
                            <input type="text" class="form-control" id="leadCompany" name="company_name">
                        </div>
                        <div class="mb-3">
                            <label for="leadPhone" class="form-label">Phone</label>
                            <input type="text" class="form-control" id="leadPhone" name="phone">
                        </div>
                        <div class="mb-3">
                            <label for="leadEmail" class="form-label">Email</label>
                            <input type="email" class="form-control" id="leadEmail" name="email">
                        </div>
                        <div class="mb-3">
                            <label for="leadSource" class="form-label">Source</label>
                            <input type="text" class="form-control" id="leadSource" name="source">
                        </div>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

                              {{-- New Lead Modal --}}
    <div class="modal fade" id="addLeadModal" tabindex="-1" aria-labelledby="addLeadModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addLeadModalLabel">Add New Lead</h5>
                    <button type="button" class="btn" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fa-solid fa-xmark" style="font-size: 22px;"></i>
                    </button>                    
                </div>
                <div class="modal-body">
                    <form id="addLeadForm">
                        <div class="row">
                            <div class="col-md-4">
                                <label for="status">Status</label>
                                <select class="form-control" id="status" name="status">
                                    <option value="new">New</option>
                                    <option value="complete">Complete</option>
                                    <option value="postponed">Postponed</option>
                                    <option value="followup">Follow Up</option>
                                    <option value="customer">Customer</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="source">Source</label>
                                <select class="form-control" id="source" name="source">
                                    <option value="">Select a Source</option>
                                    <option value="schedule a visit">Schedule A Visit</option>
                                    <option value="floor plan">Floor Plan</option>
                                    <option value="pricing plan">Pricing Plan</option>
                                    <option value="dream digit brochure downloaded">Dream Digit Brochure Downloaded</option>
                                    <option value="dream digit area statement downloaded">Dream Digit Area Statement Downloaded</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="assigned">Assigned</label>
                                <select class="form-control" id="assigned" name="assigned">
                                    <option value="Sakshi Pisal">Sakshi Pisal</option>
                                    <option value="Priyanka Chorat">Priyanka Chorat</option>
                                    <option value="Komal Borse">Komal Borse</option>
                                    <option value="Shaheen Khan">Shaheen Khan</option>
                                    <option value="Wasim Sayyed">Wasim Sayyed</option>
                                </select>
                            </div>
                        </div>
    
                        <div class="row mt-3">
                            <div class="col-md-12">
                                <label for="tags">Tags</label>
                                <input type="text" class="form-control" id="tags" placeholder="Enter tags (comma-separated)" name="tags">
                            </div>
                        </div>
    
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <label for="name">Name</label>
                                <input type="text" class="form-control" id="name" placeholder="Name" name="name">
                            </div>
                            <div class="col-md-6">
                                <label for="position">Position</label>
                                <input type="text" class="form-control" id="position" placeholder="Position" name="position">
                            </div>
                        </div>
    
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <label for="email">Email Address</label>
                                <input type="email" class="form-control" id="email" placeholder="Email Address" name="email">
                            </div>
                            <div class="col-md-6">
                                <label for="website">Website</label>
                                <input type="text" class="form-control" id="website" placeholder="Website" name="website">
                            </div>
                        </div>
    
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <label for="phone">Phone</label>
                                <input type="text" class="form-control" id="phone" placeholder="Phone" name="phone">
                            </div>
                            <div class="col-md-6">
                                <label for="lead_value">Lead Value</label>
                                <input type="text" class="form-control" id="lead_value" placeholder="Lead Value" name="lead_value">
                            </div>
                        </div>
    
                        <div class="row mt-3">
                            <div class="col-md-12">
                                <label for="address">Address</label>
                                <textarea class="form-control" id="address" placeholder="Enter full address" name="address"></textarea>
                            </div>
                        </div>
    
                        <div class="row mt-3">
                            <div class="col-md-4">
                                <label for="city">City</label>
                                <input type="text" class="form-control" id="city" placeholder="City" name="city">
                            </div>
                            <div class="col-md-4">
                                <label for="state">State</label>
                                <input type="text" class="form-control" id="state" placeholder="State" name="state">
                            </div>
                            <div class="col-md-4">
                                <label for="country">Country</label>
                                <select class="form-control" id="country" name="country">
                                    <option value="">Select a Country</option>
                                    <option value="india">India</option>
                                    <option value="usa">USA</option>
                                </select>
                            </div>
                        </div>
    
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <label for="zip_code">Zip Code</label>
                                <input type="text" class="form-control" id="zip_code" placeholder="Zip Code" name="zip_code">
                            </div>
                            <div class="col-md-6">
                                <label for="language">Default Language</label>
                                <select class="form-control" id="language" name="language">
                                    <option value="english">English</option>
                                    <option value="hindi">Hindi</option>
                                    <option value="marathi">Marathi</option>
                                </select>
                            </div>
                        </div>
    
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <label for="company">Company</label>
                                <input type="text" class="form-control" id="company" placeholder="Company" name="company_name">
                            </div>
                        </div>
    
                        <div class="row mt-3">
                            <div class="col-md-12">
                                <label for="description">Description</label>
                                <textarea class="form-control" id="description" placeholder="Description" name="description"></textarea>
                            </div>
                        </div>
    
    
                        <!-- Public and contacted checkboxes -->
                        <div class="row mb-3">
                            <div class="col d-flex align-items-center">
                                <div class="form-check" style="margin-right: 14px;"> <!-- me-4 adds margin to the right -->
                                    <input type="checkbox" class="form-check-input" id="publicCheckbox">
                                    <label class="form-check-label" for="publicCheckbox">Public</label>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="contactedCheckbox">
                                    <label class="form-check-label" for="contactedCheckbox">Contacted</label>
                                </div>
                            </div>
                        </div>   
                         <!-- Modal Footer -->
                        <div class="modal-footer mt-3">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="close-btn">Close</button>
                            <button type="button" class="btn btn-primary" id="save-btn">Save Task</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

                               {{-- Add Note Modal --}}
    <div class="modal fade" id="addNoteModal" tabindex="-1" role="dialog" aria-labelledby="addNoteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addNoteModalLabel">Add Note</h5>
                    <button type="button" class="btn" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fa-solid fa-xmark" style="font-size: 22px;"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="addNoteForm">
                        <input type="hidden" id="noteLeadId" name="lead_id">
                        <div class="form-group">
                            <label for="noteText">Note</label>
                            <textarea class="form-control" id="noteText" name="note" rows="3"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary" id="save-note-btn">Save Note</button>
                        <button type="button" class="btn btn-danger" id="clearNoteBtn">Clear Note</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
  
    <div class="row">
        <div class="col-12">
            <div class="card" style="width: 96%;right: -31px;">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-centered w-100 dt-responsive nowrap" id="leadsTable">
                            <thead>
                                <tr>
                                    <th class="all">ID</th>
                                    <th class="all">Name</th>
                                    <th>Company</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th>Source</th>
                                    <th>Status</th>
                                    <th>Notes</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if ($leads->count() > 0)
                                    @foreach ($leads as $lead)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>  <!-- Generates sequential numbering -->
                                            <td>
                                                {{ $lead->name }}
                                                <div class="lead-actions">
                                                    <a href="#" class="edit-lead" data-id="{{ $lead->id }}" data-name="{{ $lead->name }}" data-company="{{ $lead->company_name }}" data-phone="{{ $lead->phone }}" data-email="{{ $lead->email }}" data-source="{{ $lead->source }}" data-bs-toggle="modal" data-bs-target="#editLeadModal">Edit</a> | 
                                                    <a href="#" class="delete-lead" data-id="{{ $lead->id }}">Delete</a>
                                                </div>
                                            </td>
                                            <td>{{ $lead->company_name }}</td>
                                            <td>{{ $lead->phone }}</td>
                                            <td>{{ $lead->email }}</td>
                                            <td>{{ $lead->source }}</td>
                                            <td>
                                                <select class="form-select status-dropdown" data-id="{{ $lead->id }}" data-status="{{ $lead->status }}">
                                                    <option value="new">New</option>
                                                    <option value="complete">Complete</option>
                                                    <option value="followup">Follow Up</option>
                                                    <option value="postponed">Postponed</option>
                                                    <option value="customer">Customer</option>
                                                </select>    
                                            </td>
                                            <td>
                                                <button class="btn btn-sm add-note-btn" data-id="{{ $lead->id }}">
                                                    <span class="note-icon" id="note-icon-{{ $lead->id }}">
                                                        <i class="fas fa-sticky-note"></i>
                                                    </span>
                                                    Add Note
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr><td colspan="6">No leads found.</td></tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@section('scripts')
<script>
    $(document).ready(function() {


         $('#leadsTable').DataTable({
            "lengthMenu": [10, 25, 50, 100],
            "pageLength": 10, // Initial page length
            "searching": true,
            "ordering": true,
            "info": true,
            "language": {
                "lengthMenu": "Show _MENU_ entries",
                "search": "Search:",
                "paginate": {
                    "first": "First",
                    "last": "Last",
                    "next": "Next",
                    "previous": "Previous"
                }
            }
        });

        $(document).on('click', '.edit-lead', function() {  // Delegated event binding
    console.log("Edit link clicked"); 

    var leadId = $(this).data('id');
    var leadName = $(this).data('name');
    var leadCompany = $(this).data('company');
    var leadPhone = $(this).data('phone');
    var leadEmail = $(this).data('email');
    var leadSource = $(this).data('source');

    console.log("Lead ID:", leadId);
    console.log("Lead Name:", leadName);

    $('#editLeadForm #leadId').val(leadId);
    $('#editLeadForm #leadName').val(leadName);
    $('#editLeadForm #leadCompany').val(leadCompany);
    $('#editLeadForm #leadPhone').val(leadPhone);
    $('#editLeadForm #leadEmail').val(leadEmail);
    $('#editLeadForm #leadSource').val(leadSource);

    $('#editLeadModal').modal('show');
});

        $('#editLeadForm').submit(function(event) {
    event.preventDefault();
    var leadId = $('#leadId').val();

    $.ajax({
        url: '/leads/' + leadId, 
        type: 'PUT',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: $(this).serialize(), // Serialize the entire form
        success: function(response) {
            console.log("Lead updated successfully:", response);
            alert(response.message);
            $('#editLeadModal').modal('hide');
            location.reload(); // Or update the table dynamically
        },
        error: function(error) {
            console.error("Lead update error:", error);
            alert("Error updating lead.");
        }
    });
});

$(document).on('click', '.delete-lead', function(event) {
    event.preventDefault();
    var leadId = $(this).data('id');

    if (confirm("Are you sure you want to delete this lead?")) {
        $.ajax({
            url: '/leads/' + leadId, 
            type: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                alert(response.message);
                location.reload();
            },
            error: function(error) {
                console.error("Lead delete error:", error);
                alert("Error deleting lead.");
            }
        });
    }
});



function exportTable(type) {
    let table = document.getElementById('leadsTable'); // Replace 'leadsTable' with table's ID

    if (type === 'excel') {
        // Excel export logic (using a library like `exceljs` or server-side generation)
        alert('Excel export clicked'); // Replace with Excel export implementation
    } else if (type === 'csv') {
        let csv = convertTableToCSV(table);
        downloadFile(csv, 'leads.csv');
    } else if (type === 'pdf') {
        // PDF export logic (using a library like `jspdf` or server-side generation)
        alert('PDF export clicked'); // Replace with PDF export implementation
    } else if (type === 'print') {
        printTable(table);
    }
}


function convertTableToCSV(table) {
    let csv = [];
    let rows = table.rows;

    for (let i = 0; i < rows.length; i++) {
        let row = [];
        let cells = rows[i].cells;

        for (let j = 0; j < cells.length; j++) {
            row.push(cells[j].innerText);
        }

        csv.push(row.join(","));
    }

    return csv.join("\n");
}

function downloadFile(csv, filename) {
    let csvFile;
    let downloadLink;

    csvFile = new Blob([csv], {type: "text/csv"});
    downloadLink = document.createElement("a");
    downloadLink.download = filename;
    downloadLink.href = window.URL.createObjectURL(csvFile);
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
}

function printTable(table) {
    let printWindow = window.open('', '_blank');
    printWindow.document.write('<html><head><title>Print</title></head><body>');
    printWindow.document.write('<style>table { width: 100%; border-collapse: collapse; } table, th, td { border: 1px solid black; padding: 5px; text-align: left; }</style>'); // Basic styling
    printWindow.document.write(table.outerHTML);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.print();
}


function printLeads() {
        // 1. Open a new window with the table content:
        var printWindow = window.open('', '_blank');
        printWindow.document.write('<html><head><title>Print Leads</title></head><body>');

        // Get the table HTML (you might need to adjust the selector):
        var tableHtml = document.getElementById('leadsTable').outerHTML;  
        printWindow.document.write(tableHtml);

        printWindow.document.write('</body></html>');
        printWindow.document.close();

        // 2. Print the new window:
        printWindow.print();
        printWindow.close(); 
    }

    $('#leads-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '/get-leads-data',
                    type: 'GET'
                },
                columns: [
                    { data: 'name', name: 'name', title: 'Name' },
                    { data: 'email', name: 'email', title: 'Email' },
                    { data: 'phone', name: 'phone', title: 'Phone' },
                    { data: 'company', name: 'company', title: 'Company' },
                    { data: 'source', name: 'source', title: 'Source' }
                ]
            });

            $('#addLeadForm').submit(function(event) {
    event.preventDefault();

    $.ajax({
        url: '/leads',
        type: 'POST',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: {
            name: $('#name').val(),
            email: $('#email').val(),
            phone: $('#phone').val(),
            company_name: $('#company').val(),
            source: $('#source').val()
        },
        success: function(response) {
            console.log("Success:", response);
            $('#addLeadModal').modal('hide');
            $('#addLeadForm')[0].reset();
            $('#leads-table').DataTable().ajax.reload();
            alert(response.message);
        },
        error: function(xhr) {
            console.error("Error:", xhr.responseText);
            alert("Error adding lead. Please check the console for details.");
        }
    });
});


document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".status-dropdown").forEach((dropdown) => {
        dropdown.addEventListener("change", function () {
            let leadId = this.dataset.id;
            let newStatus = this.value;

            fetch(`/update-lead-status/${leadId}`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({ status: newStatus })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    console.log("Status updated successfully.");
                } else {
                    console.error("Failed to update status.");
                }
            })
            .catch(error => console.error("Error:", error));
        });
    });
});


$(document).ready(function () {
    initializeDropdowns(); // Initialize on page load
});

// Function to initialize dropdowns
function initializeDropdowns() {
    $('.status-dropdown').each(function () {
        const dropdown = $(this);
        const leadId = dropdown.data('id');
        const storedStatus = localStorage.getItem(`lead_status_${leadId}`);

        if (storedStatus) {
            dropdown.val(storedStatus);
        }
        updateStatusColor(dropdown); // Set initial color
    });
}

// Handle change event using $(document).on()
$(document).on('change', '.status-dropdown', function () {
    const dropdown = $(this);
    const leadId = dropdown.data('id');
    const selectedStatus = dropdown.val();

    localStorage.setItem(`lead_status_${leadId}`, selectedStatus);
    updateStatusColor(dropdown);
});

// Function to update dropdown color
function updateStatusColor(dropdown) {
    var status = dropdown.val();
    dropdown.removeClass('new complete followup postponed customer') // Remove existing classes

    if (status) {
        dropdown.addClass(status);
    }
}

// Ensure status updates after DataTables or pagination loads new rows
$(document).on('draw.dt', function () {
    setTimeout(() => {
        initializeDropdowns(); // Reapply colors after DataTables updates the DOM
    }, 100);
});

             // Add Note
      $(document).on('click', '.add-note-btn', function() {
            var leadId = $(this).data('id');
            $('#addNoteModal').modal('show');
            $('#noteLeadId').val(leadId);

            // Fetch existing note from localStorage if available
            var existingNote = localStorage.getItem('note-' + leadId);
            if (existingNote) {
                $('#noteText').val(existingNote);
            } else {
                $('#noteText').val('');
            }
        });

        $('#addNoteForm').submit(function(e) {
            e.preventDefault();
            var leadId = $('#noteLeadId').val();
            var noteText = $('#noteText').val();

            // Store note in localStorage
            localStorage.setItem('note-' + leadId, noteText);

            $('#addNoteModal').modal('hide');
            alert("Note saved successfully!");

            // Update button appearance
            if (noteText.trim() === '') {
                $('.add-note-btn[data-id="' + leadId + '"]').removeClass('animated');
            } else {
                $('.add-note-btn[data-id="' + leadId + '"]').addClass('animated');
            }
        });

        $(document).on('click', '#clearNoteBtn', function() {
            var leadId = $('#noteLeadId').val();

            // Remove note from localStorage
            localStorage.removeItem('note-' + leadId);

            $('#noteText').val('');
            $('#addNoteModal').modal('hide');
            alert("Note cleared successfully!");

            // Update button appearance
            $('#note-icon-' + leadId).removeClass('animated');
        });

        // Initialize animations on page load
        @foreach($leads as $lead)
            if (localStorage.getItem('note-{{ $lead->id }}')) {
                $('#note-icon-{{ $lead->id }}').addClass('animated');
            }
        @endforeach

        // Function to count statuses and update filter buttons
    function updateStatusCounts() {
    let newCount = 0;
    let completeCount = 0;
    let postponedCount = 0;
    let followUpCount = 0;
    let customerCount = 0;

    // Loop through each row and check the status value
    $('.status-dropdown').each(function () {
        const status = $(this).val();

        // Increment counters based on the status
        if (status === 'new') {
            newCount++;
        } else if (status === 'complete') {
            completeCount++;
        } else if (status === 'postponed') {
            postponedCount++;
        } else if (status === 'followup') {
            followUpCount++;
        } else if (status === 'customer') {
            customerCount++;
        }
    });

    // Update the button counts
    $('#new-count').text(newCount);
    $('#complete-count').text(completeCount);
    $('#postponed-count').text(postponedCount);
    $('#followup-count').text(followUpCount);
    $('#customer-count').text(customerCount);
}

// Update counts on page load
$(document).ready(function () {
    updateStatusCounts();

    // Update counts whenever a status is changed
    $(document).on('change', '.status-dropdown', function () {
        updateStatusCounts();
    });
});

    });
</script>
@endsection