@extends('layouts.app')

@section('title', $pageTitle ?? 'Leads')


@section('content')
<div class="container-fluid mt-4" style="padding-top: 70px;">
    
  

    <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">
                  
                 <div class="dropdown">
  <button class="btn btn-danger btn-sm dropdown-toggle text-white"
          type="button"
          id="filterBtn"
          data-bs-toggle="dropdown"
          aria-expanded="false"
          style="background-color: #ec1c24a3; height: 29px; width: 160px; border: none;">
    {{ request('user_id') ? ($users[request('user_id')] ?? 'All Companies') : 'All Companies' }}
  </button>
  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="filterBtn">
    <li>
      <a class="dropdown-item company-filter {{ request('user_id') == '' ? 'active text-danger' : '' }}" data-id="">
        All Companies
      </a>
    </li>
    @foreach($users as $id => $name)
      <li>
        <a class="dropdown-item company-filter {{ request('user_id') == $id ? 'active text-danger' : '' }}" data-id="{{ $id }}">
          {{ $name }}
        </a>
      </li>
    @endforeach
  </ul>
</div>



                    <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>
        
      
        

        <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 style="width: 20px; text-align:center;"><input type="checkbox" id="selectAll" style="margin: 0 auto;"></th>

                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Project Name</th>
                    </tr>
                    </thead>
                    <tbody>
                        @forelse($leads as $lead)
                        <tr>
                            <td style="width: 40px; text-align:center;">
                                <input type="checkbox" class="rowCheckbox" name="lead_ids[]" value="{{ $lead['id'] }}">
                            </td>
                            <td>{{ $lead['name'] }}</td>
                            <td>{{ $lead['email'] }}</td>
                            <td>{{ $lead['phone'] }}</td>
                            <td>{{ $lead['project_name'] }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center">No leads available</td>
                        </tr>
                        @endforelse
                    </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>
    
    
  
                 

 

@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">
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<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" />
<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<!-- 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: [[2, 'asc']],
        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;
}


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')
    }
});

      // 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);
    });
    
    
    $(document).on('click', '.company-filter', function () {
    const userId = $(this).data('id');
    const name = $(this).text();

    // Update button text
    $('#filterBtn').text(name);

    // Redirect
    if (!userId) {
        window.location.href = window.location.pathname;
    } else {
        window.location.href = '?user_id=' + userId;
    }
});
    
    
  // ✅ ✅ Only ONE click handler
   $('#filterBtn').on('change', function () {
    const userId = $(this).val();

    if (!userId) {
        // If empty, reload page without filter
        window.location.href = window.location.pathname;
        return;
    }

    // Option 1: If you want to reload with query param
    window.location.href = `?user_id=${userId}`;

    // Option 2: AJAX approach (uncomment if needed instead of redirect)
    /*
    $.ajax({
        url: '{{ route("leads.fetch.by.user") }}',
        method: 'GET',
        data: { user_id: userId },
        success: function (response) {
            table.clear();
            response.forEach(lead => {
                table.row.add([
                    `<input type="checkbox" name="lead_ids[]" value="${lead.id ?? ''}">`,
                    lead.name ?? '',
                    lead.email ?? '',
                    lead.phone ?? '',
                    lead.project_name ?? ''
                ]);
            });
            table.draw();
        },
        error: function (xhr) {
            alert('Failed to fetch leads.');
        }
    });
    */
});


// Initialize Select2
$('#filterBtn').select2({
    placeholder: "Search Companies...",
    allowClear: true,
    width: 'style' // matches the Bootstrap styling
});


$('#filterBtn').on('change', function () {
    const userId = $(this).val();

    if (!userId) {
        window.location.href = window.location.pathname;
    } else {
        window.location.href = `?user_id=${userId}`;
    }
});





    });
   
    
    </script>
    @endsection