@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 text-primary">New</span>
            <span id="count-new" class="text-dark">2</span>
        </button>
        <button class="btn btn-outline-primary btn-sm filter-btn waves-effect" data-status="Under Construction" id="btn-under-construction">
            <span class="status-text" style="color: #ffb300;">Under Construction</span>
            <span id="count-under-construction" class="text-dark">2</span>
        </button>
        <button class="btn btn-outline-primary btn-sm filter-btn waves-effect" data-status="Completed" id="btn-completed">
            <span class="status-text text-success">Completed</span>
            <span id="count-completed" class="text-dark">0</span>
        </button>
        <button class="btn btn-outline-primary btn-sm filter-btn waves-effect" data-status="Project Soldout" id="btn-soldout">
            <span class="status-text text-danger">Sold Out</span>
            <span id="count-soldout" class="text-dark">1</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">Projects</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-project" data-bs-toggle="modal" data-bs-target="#addProjectModal">
                <i class="bi bi-plus-lg me-1"></i> Add New Project
            </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>

            <button class="btn btn-danger btn-sm" id="bulkDeleteBtn">
                <i class="bi bi-trash fs-6 me-1"></i> Mass Delete
            </button>

            <div class="dropdown">
                <button class="btn btn-sm btn-secondary dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-upload me-1"></i> Export
                </button>
                <ul class="dropdown-menu" aria-labelledby="exportDropdown">
                    <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 -->
<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 Projects</h5>
               <button type="button" class="custom-close" data-bs-dismiss="modal" aria-label="Close">×</button>
            </div>

            <div class="modal-body">
                <form id="projectFilterForm" class="row g-3">
                    <div class="col-md-6">
                        <label for="filterProjectName" class="form-label">Project Name</label>
                        <input type="text" id="filterProjectName" class="form-control" placeholder="Search Project Name">
                    </div>

                    <div class="col-md-6">
                        <label for="filterBuilder" class="form-label">Builder Name</label>
                        <select id="filterBuilder" class="form-select">
                            <option value="">-- All --</option>
                            <option value="Priyanka Chorat">Priyanka Chorat</option>
                            <option value="Sakshi Pisal">Sakshi Pisal</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 class="col-md-6">
                        <label for="filterStatus" class="form-label">Project Status</label>
                        <select id="filterStatus" class="form-select">
                            <option value="">-- All --</option>
                            <option value="New">New</option>
                            <option value="Under Construction">Under Construction</option>
                            <option value="Completed">Completed</option>
                            <option value="Project Soldout">Project Soldout</option>
                        </select>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" id="applyFilters" class="btn btn-danger">Apply Filters</button>
                <button type="button" id="clearFilters" 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 class="table-responsive"><div class="custom-scroll-container">
                <table class="table table-bordered w-100" id="projectsTable">
                    <thead>
                        <tr>
                            <th class="no-sort"><input type="checkbox" id="selectAll"></th> 
                            <th>Project Name</th>
                            <th>Project Location</th>
                            <th>Builder Name</th>
                            <th>Members</th>
                            <th>Project Status</th>
                            <th>Project URL</th>
                        </tr>
                    </thead>
                   <tbody>
                        @foreach($projects as $index => $project)
                        <tr data-id="{{ $project->id }}">
                           <td><input type="checkbox" class="rowCheckbox" value="{{ $project->id }}"></td>

                             <td class="project-name">
                                <div>{{ $project->project_name }}</div>
                                <div class="row-actions">
                                    <a href="#" class="edit-link text-primary" data-id="{{ $project->id }}">Edit</a>
                                    |
                                    <a href="#" class="delete-link text-danger" data-id="{{ $project->id }}">Delete</a>
                                </div>
                            </td>
                            <td>{{ $project->project_location }}</td>
                            <td>{{ $project->builder_name }}</td>
                            <td>
                                @php $names = array_filter(array_map('trim', explode(',', $project->members ?? ''))); @endphp
                                <div class="member-stack">
                                    @foreach($names 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
                                    $project_status = strtolower(trim($project->project_status));
                                    $badgeClass = match($project_status) {
                                        'new' => 'new',
                                        'completed' => 'completed',
                                        'under construction' => 'under-construction',
                                        'project soldout' => 'soldout',
                                        default => '',
                                    };
                                @endphp
                            
                                <button type="button" class="btn p-0 border-0 status-badge-button" 
                                    data-id="{{ $project->id }}" 
                                    data-status="{{ ucfirst($project->project_status) }}" 
                                    data-badge-class="{{ $badgeClass }}">
                                    <span class="custom-badge {{ $badgeClass }} d-inline-flex align-items-center gap-1 px-2 py-1">
                                        {{ ucfirst($project->project_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>
                            </td>
                            <td>
                                @if($project->project_url)
                                    <a href="{{ $project->project_url }}" target="_blank">{{ $project->project_url }}</a>
                                @else
                                    <em>N/A</em>
                                @endif
                            </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="projectsTable_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>
    
    
    <iframe src="https://dreamdevelopers.key24.in/form/embed/5" width="100%" height="600" frameborder="0"></iframe>

    
        <!--project status badge dropdown-->
    <div id="statusDropdown" class="dropdown-menu" style="position: absolute; display: none; z-index: 9999;">
        <a class="dropdown-item change-status" data-status="New">New</a>
        <a class="dropdown-item change-status" data-status="Under Construction">Under Construction</a>
        <a class="dropdown-item change-status" data-status="Completed">Completed</a>
        <a class="dropdown-item change-status" data-status="Project Soldout">Project Soldout</a>
    </div>

                             <!-- Add New Project Modal -->
<div class="modal fade" id="addProjectModal" tabindex="-1" aria-labelledby="addProjectModalLabel" aria-hidden="true">
    <div class="modal-dialog" modal-dialog-centered modal-md>
        <form id="addProjectForm" autocomplete="off">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Add New Project</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 for="project_name" class="form-label">Project Name</label>
                        <input type="text" class="form-control" id="project_name" name="project_name" placeholder="Enter Project Name" autocomplete="off">
                    </div>

                    <div class="mb-3">
                        <label for="project_location" class="form-label">Project Location</label>
                        <input type="text" class="form-control" id="project_location" name="project_location" placeholder="Enter Project Location" autocomplete="off">
                    </div>

                    <div class="mb-3">
                        <label for="builder_name" class="form-label">Builder Name</label>
                        <select class="form-control" id="builder_name" name="builder_name">
                            <option value="">Select Builder</option>
                            <option value="Priyanka Chorat">Priyanka Chorat</option>
                            <option value="Sakshi Pisal">Sakshi Pisal</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 class="mb-3">
                        <label for="project_status" class="form-label">Project Status</label>
                        <select class="form-control" id="project_status" name="project_status">
                           <option value="New">New</option>
                        <option value="Under Construction">Under Construction</option>
                        <option value="Completed">Completed</option>
                        <option value="Project Soldout">Project Soldout</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="project_url" class="form-label">Project URL</label>
                        <input type="url" class="form-control" id="project_url" name="project_url" placeholder="https://example.com" autocomplete="off">
                    </div>
                       <div class="mb-2 position-relative" style="max-width: 512px;">
                        <label class="form-label">Members</label>
                    
                        <!-- Selected Members Display (Toggle Dropdown) -->
                        <input type="text" id="selectedMembers" class="form-control mb-4" readonly placeholder="Selected Members will appear here">
                    
                        <!-- Dropdown Box -->
                        <div id="dropdownBox" class="border rounded shadow-sm bg-white p-2" style="display: none; position: absolute; width: 100%; z-index: 1000;">
                    
                            <!-- Search Box -->
                            <input type="text" id="memberSearch" class="form-control mb-2" placeholder="Search Members...">
                    
                            <!-- Buttons -->
                            <div class="d-flex gap-2 mb-2">
                                <button type="button" id="selectAllBtn" class="btn btn-outline-primary btn-sm">Select All</button>
                                <button type="button" id="deselectAllBtn" class="btn btn-outline-secondary btn-sm">Deselect All</button>
                            </div>
                    
                            <!-- Member List -->
                            <div id="memberList" style="max-height: 200px; overflow-y: auto;">
                                <!-- JS will populate users here -->
                            </div>
                        </div>
                    </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 Project</button>
                </div>
            </div>
        </form>
    </div>
</div>

                          <!--Edit Modal-->
<div class="modal fade" id="editProjectModal" tabindex="-1" aria-labelledby="editProjectModalLabel" aria-hidden="true">
    <div class="modal-dialog" modal-dialog-centered modal-md>
        <form id="editProjectForm" autocomplete="off">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Edit Project</h5>
                    <button type="button" class="custom-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                </div>

                <div class="modal-body">
                    <input type="hidden" id="edit_project_id">

                    <div class="mb-3">
                        <label for="edit_project_name" class="form-label">Project Name</label>
                        <input type="text" class="form-control" id="edit_project_name" name="project_name">
                    </div>

                    <div class="mb-3">
                        <label for="edit_project_location" class="form-label">Project Location</label>
                        <input type="text" class="form-control" id="edit_project_location" name="project_location">
                    </div>

                    <div class="mb-3">
                        <label for="edit_builder_name" class="form-label">Builder Name</label>
                        <select class="form-control" id="edit_builder_name" name="builder_name">
                            <option value="">Select Builder</option>
                            <option value="Priyanka Chorat">Priyanka Chorat</option>
                            <option value="Sakshi Pisal">Sakshi Pisal</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 class="mb-3">
                        <label for="edit_project_status" class="form-label">Project Status</label>
                        <select class="form-control" id="edit_project_status" name="project_status">
                            <option value="New">New</option>
                            <option value="Under Construction">Under Construction</option>
                            <option value="Completed">Completed</option>
                            <option value="Project Soldout">Project Soldout</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="edit_project_url" class="form-label">Project URL</label>
                        <input type="url" class="form-control" id="edit_project_url" name="project_url" placeholder="https://example.com">
                    </div>
                     <div class="mb-2 position-relative" style="max-width: 512px;">
                        <label class="form-label">Members</label>
                    
                        <!-- Selected Members Display (Toggle Dropdown) -->
                        <input type="text" id="edit_selectedMembers" class="form-control mb-4" readonly placeholder="Selected Members will appear here">
                    
                        <!-- Dropdown Box -->
                        <div id="edit_dropdownBox" class="border rounded shadow-sm bg-white p-2" style="display: none; position: absolute; width: 100%; z-index: 1000;">
                    
                            <!-- Search Box -->
                            <input type="text" id="edit_memberSearch" class="form-control mb-2" placeholder="Search Members...">
                    
                            <!-- Buttons -->
                            <div class="d-flex gap-2 mb-2">
                                <button type="button" id="edit_selectAllBtn" class="btn btn-outline-primary btn-sm">Select All</button>
                                <button type="button" id="edit_deselectAllBtn" class="btn btn-outline-secondary btn-sm">Deselect All</button>
                            </div>
                    
                            <!-- Member List -->
                            <div id="edit_memberList" style="max-height: 200px; overflow-y: auto;">
                                <!-- JS will populate users here -->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Update Project</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>


             <!-- Bulk Delete Modal -->
<div class="modal fade" id="bulkDeleteModal" tabindex="-1" aria-labelledby="bulkDeleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form id="bulkDeleteForm">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bulkDeleteModalLabel">Confirm Mass Deletion</h5>
                    <button type="button" class="custom-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning" role="alert">
                        <i class="bi bi-exclamation-triangle-fill"></i> <strong>Warning:</strong> Deleting projects is irreversible. Please ensure you have selected the correct projects.
                    </div>
                
                    <p>
                        <strong>Total Selected Projects:</strong> <span id="selectedCount" class="badge bg-primary">0</span>
                    </p>
                    <ul id="selectedProjectList" class="list-group mb-3"></ul>
                
                    <p><strong>Enter the OTP to confirm the deletion:</strong></p>
                    <div id="otpInputsContainer"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn custom-btn" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn custom-btn" id="delete">Delete</button>
                </div>
            </div>
        </form>
    </div>
</div>


<!--/* bulk delete success modal*/-->
<div id="customSuccessModal" style="display: none;">
    <div id="customModalOverlay"></div>
    <div id="customModalContent">
        <div class="check-icon">
            <svg viewBox="0 0 52 52">
                <circle class="check-circle" cx="26" cy="26" r="25" fill="none"/>
                <path class="check-mark" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
            </svg>
        </div>
        <p id="customSuccessMessage">Selected projects deleted successfully</p>
        <button id="closeSuccessBtn">OK</button>
    </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">
<!-- SweetAlert2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.7.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>
<!-- SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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 src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>



<script>
  $(document).ready(function () {
    //   datatable initialization
    const table = $('#projectsTable').DataTable({
        dom: 'Brtip',
         order: [], // disable initial sorting on any column
    //      select: {
    //     style: 'multi'
    // },
        buttons: [
            {
                extend: 'excelHtml5',
                title: 'Projects',
                className: 'd-none',
                exportOptions: {
                    columns: ':not(.no-export)'
                }
            },
            {
                extend: 'csvHtml5',
                title: 'Projects',
                className: 'd-none',
                exportOptions: {
                    columns: ':not(.no-export)'
                }
            },
            {
                extend: 'pdfHtml5',
                title: 'Projects',
                className: 'd-none',
                exportOptions: {
                    columns: ':not(.no-export)'
                }
            },
            {
                extend: 'print',
                title: 'Projects',
                className: 'd-none',
                exportOptions: {
                    columns: ':not(.no-export)'
                }
            },
        ],
        scrollX: true,       // force horizontal scroll
        pagingType: 'simple_numbers',  // For simple pagination
        pageLength: 10,
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search projects...",
            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 getSelectedProjectIds() {
    let selectedIds = [];
    $('.rowCheckbox:checked').each(function () {
        selectedIds.push($(this).val());
    });
    return selectedIds;
}


function exportProjectWithSelection(route, fileName) {
    const selectedIds = getSelectedProjectIds();
    
    $.ajax({
        url: route,
        method: 'POST',
        data: {
            ids: selectedIds,
            _token: '{{ csrf_token() }}'
        },
        xhrFields: {
            responseType: 'blob'
        },
        success: function (data) {
            const blob = new Blob([data]);
            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.');
        }
    });
}

// PDF Button
$('#exportPDF').on('click', function () {
    exportProjectWithSelection('{{ route("projects.export.pdf") }}', 'projects.pdf');
});

// For Excel/CSV/Print (using DataTables built-in export functions)
function triggerProjectTableExport(buttonClass) {
    const selectedIds = getSelectedProjectIds();
    
    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 () {
    triggerProjectTableExport('.buttons-excel');
});
$('#exportCSV').on('click', function () {
    triggerProjectTableExport('.buttons-csv');
});
$('#exportPrint').on('click', function () {
    triggerProjectTableExport('.buttons-print');
});

    
    // members user icon
    function initAvatarsTooltips(){
        const avatarEls = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        avatarEls.map(el => new bootstrap.Tooltip(el));
    }
    initAvatarsTooltips();            // first load
    table.on('draw.dt', initAvatarsTooltips); // redraws (paging / search)
    
    //members user icon
    function buildIconsHtml(names){
        const icons = names.map(()=>`
            <span class="user-ico" data-bs-toggle="tooltip">
                <i class="bi bi-person-fill"></i>
            </span>`).join('');
    
        return `<div class="member-stack">${icons}</div>`;
    }
    
    // Row‑level Edit
    $('#projectsTable').on('click', '.edit-link', function (e) {
        e.preventDefault();
        openEditModal($(this).data('id'));          // reuse your helper
    });
    
    // Row‑level Delete
    $('#projectsTable').on('click', '.delete-link', function (e) {
        e.preventDefault();
        const id = $(this).data('id');
    
        if (!confirm('Are you sure you want to delete this project?')) return;
    
        $.ajax({
            url : `/projects/${id}`,
            method: 'POST',
            data : {_method:'DELETE', _token:'{{ csrf_token() }}'},
            success(){ table.row($(this).closest('tr')).remove().draw(false); },
            error  (){ alert('Delete failed.'); }
        });
    });


    // Add project to datatable
     $('#addProjectForm').on('submit', function (e) {
        e.preventDefault();
    
        let formData = {
            project_name: $('#project_name').val(),
            project_location: $('#project_location').val(),
            builder_name: $('#builder_name').val(),
            project_status: $('#project_status').val(),
             members: Array.from(selectedMembers),      // ←‑‑ put this line back
             project_url: $('#project_url').val(),
            _token: '{{ csrf_token() }}'
        };
        
       
       console.log('🟢 sending', formData);
    
        $.ajax({
            url: '{{ route("projects.store") }}',
            type: 'POST',
            data: formData,
            success: function (response) {
                if (response.success) {
                    $('#addProjectModal').modal('hide');
                    $('#addProjectForm')[0].reset();
                    // Display success message
                    alert('Project successfully added!');
    
    
                   let badge = '';
                    let project_status = response.project.project_status.trim().toLowerCase();
            
                    switch (project_status) {
                        case 'new':
                            badge = `<span class="custom-badge new">New</span>`;
                            break;
                        case 'under construction':
                            badge = `<span class="custom-badge under-construction">Under Construction</span>`;
                            break;
                        case 'completed':
                            badge = `<span class="custom-badgee completed">Completed</span>`;
                            break;
                        case 'project soldout':
                            badge = `<span class="custom-badge soldout">Project Soldout</span>`;
                            break;
                        default:
                            badge = `<span class="custom-badge">${response.project.project_status}</span>`;
                    }
    
    
                    let checkbox = `<input type="checkbox" class="rowCheckbox" value="${response.project.id}">`;
                    const actionsInline = `
                    <div class="row-actions">
                        <a href="#" class="edit-link text-primary" data-id="${response.project.id}">Edit</a> |
                        <a href="#" class="delete-link text-danger" data-id="${response.project.id}">Delete</a>
                    </div>`;
    
                    $('#projectsTable').DataTable().row.add([
                        checkbox,
                        `<div>${response.project.project_name}</div>${actionsInline}`,
                        response.project.project_location,
                        response.project.builder_name,
                        badge,
                        buildIconsHtml(response.members),
                        response.project.project_url
        ? `<a href="${response.project.project_url}" target="_blank">${response.project.project_url}</a>`
        : 'N/A',
                        actionsHtml
                    ]).draw(); // Redraw the table
                    initAvatarsTooltips();
                }
            },
            error: function (xhr, status, error) {
                console.error('Error:', xhr.responseJSON || error);
                alert("Something went wrong! Please try again.");
            }
        });
    });


    // Edit & Delete Functionality
    window.openEditModal = function (id) {
        $.ajax({
            url: `/projects/${id}`, // Corrected URL
            type: 'GET',
            success: function (response) {
                $('#edit_project_id').val(response.id);
                $('#edit_project_name').val(response.project_name);
                $('#edit_project_location').val(response.project_location);
                $('#edit_builder_name').val(response.builder_name);
                $('#edit_project_status').val(response.project_status);
                $('#edit_project_url').val(response.project_url);


                $('#editProjectModal').modal('show');
            },
            error: function () {
                alert('Failed to fetch project data.');
            }
        });
    };

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

        let id = $('#edit_project_id').val();

        $.ajax({
            url: `/projects/${id}`, // Corrected URL
            method: 'PUT',
            data: {
                project_name: $('#edit_project_name').val(),
                project_location: $('#edit_project_location').val(), // Corrected name attribute
                builder_name: $('#edit_builder_name').val(),
                project_status: $('#edit_project_status').val(),
                project_url: $('#edit_project_url').val(),
                _token: '{{ csrf_token() }}'
            },
            success: function (res) {
                $('#editProjectModal').modal('hide');
                alert('Project updated Sucessfully!');
                location.reload(); // Consider updating the table row instead of a full reload for better UX
            },
            error: function () {
                alert('Update failed.');
            }
        });
    });
    
    
    
   // pdf export functionality
    $('#exportPDF').on('click', function () {
    const selectedIds = $('.rowCheckbox:checked').map(function () {
        return $(this).val();
    }).get();

    const form = $('<form>', {
        method: 'POST',
        action: '{{ route("projects.export.pdf") }}',
        target: '_blank'
    });

    form.append(`@csrf`);

    selectedIds.forEach(id => {
        form.append($('<input>', {
            type: 'hidden',
            name: 'ids[]',
            value: id
        }));
    });

    $('body').append(form);
    form.submit();
    form.remove();
});

    
    // Handle "Select All" checkbox
    $('#selectAll').on('change', function () {
        const isChecked = $(this).prop('checked');
        table.rows().nodes().to$().find('.rowCheckbox').prop('checked', isChecked);
    });

    // Handle individual row checkbox change
    $('#projectsTable').on('change', '.rowCheckbox', function () {
        const allChecked = table.rows().nodes().to$().find('.rowCheckbox:checked').length === table.rows().count();
        $('#selectAll').prop('checked', allChecked);
    });
    
    
     $('.rowCheckbox, #selectAllCheckbox').on('change', function () {
    console.log('Checkbox state changed');  // Log when the event is triggered
    const checked = $('.rowCheckbox:checked').length > 0;
    console.log('Checked checkboxes:', checked); // Check how many checkboxes are checked
    $('#bulkDeleteBtn').prop('disabled', !checked); // Enable button when any checkbox is selected
});

    // Bulk Deletion
    $('#bulkDeleteBtn').on('click', function () {
        const selectedIds = $('.rowCheckbox:checked').map(function () {
            return $(this).val();
        }).get();

        if (selectedIds.length === 0) {
            alert("Please select at least one project to delete.");
            return;
        }

        // Get project titles for display
        const selectedTitles = $('.rowCheckbox:checked').map(function () {
            return $(this).data('title');
        }).get();

        // Update count and project list
        $('#selectedCount').text(selectedIds.length);
        $('#selectedProjectList').html('');
        selectedTitles.forEach(title => {
            $('#selectedProjectList').append(`<li class="list-group-item">${title}</li>`);
        });

        // Fetch OTP for the selected projects
        $.post('{{ route("projects.getOtpsForProjects") }}', {
            _token: '{{ csrf_token() }}',
            ids: selectedIds
        }, function (response) {
            const otp = response.otp;

            // Show OTP input field in the modal
            $('#otpInputsContainer').html(`
                <div class="mb-3">
                    <label for="commonOtpInput" class="form-label"><strong>OTP:</strong> ${otp}</label>
                    <input type="text" class="form-control" id="commonOtpInput" required placeholder="Enter OTP to confirm deletion">
                </div>
            `);

            // Show the modal
            $('#bulkDeleteModal').modal('show');
        }).fail(function () {
            alert("Failed to fetch OTP from server.");
        });
    });

    // Handle bulk delete form submission
    $('#bulkDeleteForm').on('submit', function (e) {
        e.preventDefault();

        const selectedIds = $('.rowCheckbox:checked').map(function () {
            return $(this).val();
        }).get();

        const enteredOtp = $('#commonOtpInput').val().trim();

        if (!enteredOtp) {
            alert('Please enter the OTP.');
            return;
        }

        // Send bulk delete request
        $.ajax({
            method: 'POST',
            url: '{{ route("projects.bulkDelete") }}',
            data: {
                _token: '{{ csrf_token() }}',
                projects: selectedIds,
                otp: enteredOtp
            },
     success: function (res) {
    showSuccessModal(res.message); // Shows the custom modal
},



            error: function (xhr) {
                alert(xhr.responseJSON.message || 'Something went wrong!');
            }
        });
    });
    
    
   // Show success modal with custom message
function showSuccessModal(message) {
    document.getElementById('customSuccessMessage').textContent = message;
    document.getElementById('customSuccessModal').style.display = 'flex';
}

// Close modal on OK
document.getElementById('closeSuccessBtn').addEventListener('click', function () {
    document.getElementById('customSuccessModal').style.display = 'none';
    location.reload(); // Optional: Reload
});
    

    // Add New Project modal Members option
       const members = [
        "Wasim Sayyed", "Sumit Mandal", "Shaheen Khan",
        "Sakshi Pisal", "Priyanka Chorat", "Komal Borse", "Atul Bhilare"
    ];
    
    const selectedMembers = new Set();
    
    const selectedInput = document.getElementById("selectedMembers");
    const dropdownBox = document.getElementById("dropdownBox");
    const memberListDiv = document.getElementById("memberList");
    const searchInput = document.getElementById("memberSearch");
    
    function updateSelectedInput() {
        selectedInput.value = Array.from(selectedMembers).join(", ");
    }
    
    function renderMemberList(filter = "") {
        memberListDiv.innerHTML = "";
        members.forEach(name => {
            if (name.toLowerCase().includes(filter.toLowerCase())) {
                const memberDiv = document.createElement("div");
                memberDiv.classList.add("member-item");
                
                // Create a span to hold the name and checkmark icon
                const nameSpan = document.createElement("span");
                nameSpan.textContent = name;
    
                // Create a span for the checkmark icon
                const checkmarkSpan = document.createElement("span");
                checkmarkSpan.classList.add("checkmark");
                checkmarkSpan.textContent = "✔";  // You can change this to any checkmark icon you like
    
                // Append name and checkmark to memberDiv
                memberDiv.appendChild(nameSpan);
                memberDiv.appendChild(checkmarkSpan);
    
                // Toggle the member selection on click
                memberDiv.addEventListener("click", () => {
                    if (selectedMembers.has(name)) {
                        selectedMembers.delete(name);
                        checkmarkSpan.style.display = "none";  // Hide checkmark when deselected
                    } else {
                        selectedMembers.add(name);
                        checkmarkSpan.style.display = "inline";  // Show checkmark when selected
                    }
                    updateSelectedInput();
                });
    
                // If the member is already selected, show the checkmark
                if (selectedMembers.has(name)) {
                    checkmarkSpan.style.display = "inline";
                }
    
                memberListDiv.appendChild(memberDiv);
            }
        });
    }
    
    document.getElementById("selectAllBtn").addEventListener("click", () => {
        members.forEach(name => selectedMembers.add(name));
        updateSelectedInput();
        renderMemberList(searchInput.value);
    });
    
    document.getElementById("deselectAllBtn").addEventListener("click", () => {
        selectedMembers.clear();
        updateSelectedInput();
        renderMemberList(searchInput.value);
    });
    
    searchInput.addEventListener("input", () => {
        renderMemberList(searchInput.value);
    });
    
    // Toggle dropdown on input click
    selectedInput.addEventListener("click", () => {
        dropdownBox.style.display = dropdownBox.style.display === "none" ? "block" : "none";
    });
    
    // Close dropdown if clicked outside
   document.addEventListener('click', function (event) {
    const clickedInside   = dropdownBox.contains(event.target);
    const clickedInput    = event.target === selectedInput;
    const bootstrapToggle = event.target.closest('[data-bs-toggle="dropdown"]');

    if (!clickedInside && !clickedInput && !bootstrapToggle) {
        dropdownBox.style.display = 'none';
    }
});
    
    // Initial render
    renderMemberList();
    
    
    
    
    //edit modal member option
    const editMembers = [
    "Wasim Sayyed", "Sumit Mandal", "Shaheen Khan",
    "Sakshi Pisal", "Priyanka Chorat", "Komal Borse", "Atul Bhilare"
    ];
    
    const editSelectedMembers = new Set();
    
    const editSelectedInput = document.getElementById("edit_selectedMembers");
    const editDropdownBox = document.getElementById("edit_dropdownBox");
    const editMemberListDiv = document.getElementById("edit_memberList");
    const editSearchInput = document.getElementById("edit_memberSearch");
    
    function updateEditSelectedInput() {
        editSelectedInput.value = Array.from(editSelectedMembers).join(", ");
    }
    
    function renderEditMemberList(filter = "") {
        editMemberListDiv.innerHTML = "";
        editMembers.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.classList.add("checkmark");
                checkmarkSpan.textContent = "✔";
    
                memberDiv.appendChild(nameSpan);
                memberDiv.appendChild(checkmarkSpan);
    
                memberDiv.addEventListener("click", () => {
                    if (editSelectedMembers.has(name)) {
                        editSelectedMembers.delete(name);
                        checkmarkSpan.style.display = "none";
                    } else {
                        editSelectedMembers.add(name);
                        checkmarkSpan.style.display = "inline";
                    }
                    updateEditSelectedInput();
                });
    
                if (editSelectedMembers.has(name)) {
                    checkmarkSpan.style.display = "inline";
                }
    
                editMemberListDiv.appendChild(memberDiv);
            }
        });
    }
    
    document.getElementById("edit_selectAllBtn").addEventListener("click", () => {
        editMembers.forEach(name => editSelectedMembers.add(name));
        updateEditSelectedInput();
        renderEditMemberList(editSearchInput.value);
    });
    
    document.getElementById("edit_deselectAllBtn").addEventListener("click", () => {
        editSelectedMembers.clear();
        updateEditSelectedInput();
        renderEditMemberList(editSearchInput.value);
    });
    
    editSearchInput.addEventListener("input", () => {
        renderEditMemberList(editSearchInput.value);
    });
    
    editSelectedInput.addEventListener("click", () => {
        editDropdownBox.style.display = editDropdownBox.style.display === "none" ? "block" : "none";
    });
    
    // Ensure dropdown closes only when clicking outside
    document.addEventListener("click", function (event) {
        const clickedInside = editDropdownBox.contains(event.target);
        const clickedInput = event.target === editSelectedInput;
        const isModalTrigger = event.target.closest('[data-bs-toggle="modal"]');
    
        if (!clickedInside && !clickedInput && !isModalTrigger) {
            editDropdownBox.style.display = 'none';
        }
    });
    
    // Initial render
    renderEditMemberList();



    // Edit Click
    $('.edit-link').on('click', function () {
        const id = $(this).data('id');

        $.ajax({
            url: `/projects/${id}/edit`, // Update with your route
            method: 'GET',
            success: function (data) {
                $('#edit_project_id').val(data.id);
                $('#edit_project_name').val(data.project_name);
                $('#edit_project_location').val(data.project_location);
                $('#edit_builder_name').val(data.builder_name);
                $('#edit_project_status').val(data.project_status);

                // Populate Members
                $('#edit_selectedMembers').val(data.members);
                // TODO: Render checkboxes inside #edit_memberList

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

    // Submit Edit Form
    $('#editProjectForm').on('submit', function (e) {
        e.preventDefault();
        const id = $('#edit_project_id').val();

        $.ajax({
            url: `/projects/${id}`,
            method: 'PUT',
            data: {
                project_name: $('#edit_project_name').val(),
                project_location: $('#edit_project_location').val(),
                builder_name: $('#edit_builder_name').val(),
                project_status: $('#edit_project_status').val(),
                members: $('#edit_selectedMembers').val(),
                _token: '{{ csrf_token() }}'
            },
            success: function (response) {
                location.reload(); // Refresh table
            }
        });
    });

    // Delete Click
    $('.delete-link').on('click', function () {
        const id = $(this).data('id');
        if (confirm("Are you sure you want to delete this project?")) {
            $.ajax({
                url: `/projects/${id}`,
                method: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function () {
                    location.reload();
                }
            });
        }
    });
    
    
    
    // Row-level Edit for Users
$('#usersTable').on('click', '.edit-user-btn', function (e) {
    e.preventDefault();

    const id = $(this).data('id');
    $('#edit_user_id').val(id);
    $('#edit_full_name').val($(this).data('fullname'));
    $('#edit_email').val($(this).data('email'));
    $('#edit_role').val($(this).data('role'));

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

// AJAX Submit for Edit Form
$('#editUserForm').on('submit', function (e) {
    e.preventDefault();

    const id = $('#edit_user_id').val();

    $.ajax({
        url: `/users/${id}`,
        type: 'POST',
        data: {
            _method: 'PUT',
            _token: '{{ csrf_token() }}',
            full_name: $('#edit_full_name').val(),
            email: $('#edit_email').val(),
            role: $('#edit_role').val()
        },
        success: function (response) {
            $('#editUserModal').modal('hide');
            location.reload(); // You can re-render just the row instead if needed
        },
        error: function () {
            alert('Failed to update user.');
        }
    });
});


    //project status dropdown
    $(document).ready(function() {
        let currentProjectId = null; // Store project ID when button is clicked
    
        // Show dropdown when badge button is clicked
        $(document).on('click', '.status-badge-button', function(e) {
            e.preventDefault();
            
            const offset = $(this).offset();
            const height = $(this).outerHeight();
    
            currentProjectId = $(this).data('id'); // Set current project ID
    
            $('#statusDropdown').css({
                top: offset.top + height,
                left: offset.left,
                display: 'block'
            });
        });
    
        // Hide dropdown if click outside
        $(document).on('click', function(e) {
            if (!$(e.target).closest('.status-badge-button, #statusDropdown').length) {
                $('#statusDropdown').hide();
            }
        });
    
        // When user selects a new status
        $(document).on('click', '.change-status', function(e) {
            e.preventDefault();
    
            if (!currentProjectId) {
                alert('Project ID missing.');
                return;
            }
    
            let newStatus = $(this).data('status');
            let csrfToken = $('meta[name="csrf-token"]').attr('content'); // Always get token
    
            $.ajax({
                url: '/projects/update-status/' + currentProjectId,
                type: 'POST',
                data: {
                    _token: csrfToken,
                    status: newStatus
                },
                success: function(response) {
                    if (response.success) {
                        location.reload(); // Or better: update badge dynamically without reloading
                    } else {
                        alert('Failed to update status.');
                    }
                },
                error: function() {
                    alert('Error occurred while updating status.');
                }
            });
    
            $('#statusDropdown').hide(); // Hide dropdown after selection
        });
    });
    
    
 //filter buttons
    // Function to filter projects by status
    function filterProjectsByStatus(status) {
    if (status === 'All') {
        table.column(5).search('').draw(); // Clear search to show all
    } else {
        table.column(5).search(status).draw();
    }
}


    // Function to update the status counts for all entries (including hidden ones)
  function updateStatusCount() {
    let newCount = 0;
    let underConstructionCount = 0;
    let completedCount = 0;
    let soldoutCount = 0;
    let totalCount = 0;

    // Loop through all rows (regardless of filter)
    table.rows().every(function () {
        const data = this.data();
        const status = data[5].toLowerCase();
        totalCount++;

        if (status.includes('new')) {
            newCount++;
        } else if (status.includes('under construction')) {
            underConstructionCount++;
        } else if (status.includes('completed')) {
            completedCount++;
        } else if (status.includes('soldout')) {
            soldoutCount++;
        }
    });

    $('#count-all').text(totalCount);
    $('#count-new').text(newCount);
    $('#count-under-construction').text(underConstructionCount);
    $('#count-completed').text(completedCount);
    $('#count-soldout').text(soldoutCount);
}


// On filter button click
$('.filter-btn').on('click', function () {
    const status = $(this).data('status');
    filterProjectsByStatus(status);

    // Keep total counts, not filtered ones
    updateStatusCount();
});

// Initial load
updateStatusCount();

// Apply filters and save to localStorage
$('#applyFilters').on('click', function () {
    let status = $('#filterStatus').val().trim();
    let builder = $('#filterBuilder').val().trim();
    let projectName = $('#filterProjectName').val().trim();

    // Save to localStorage
    localStorage.setItem('projectFilterStatus', status);
    localStorage.setItem('projectFilterBuilder', builder);
    localStorage.setItem('projectFilterName', projectName);

    // Apply filters to DataTable
    table.columns(1).search(projectName);  // Project Name
    table.columns(3).search(builder);      // Builder Name
    table.columns(5).search(status);       // Project Status

    table.draw();
    $('#filterModal').modal('hide');
});

// Clear filters and remove from localStorage
$('#clearFilters').on('click', function () {
    $('#filterStatus').val('');
    $('#filterBuilder').val('');
    $('#filterProjectName').val('');

    // Clear DataTable filters
    table.columns().search('');
    table.search('').draw();

    // Remove from localStorage
    localStorage.removeItem('projectFilterStatus');
    localStorage.removeItem('projectFilterBuilder');
    localStorage.removeItem('projectFilterName');

    $('#filterModal').modal('hide');
});

// On page load, re-apply filters if they exist in localStorage
$(document).ready(function () {
    let savedStatus = localStorage.getItem('projectFilterStatus');
    let savedBuilder = localStorage.getItem('projectFilterBuilder');
    let savedProjectName = localStorage.getItem('projectFilterName');

    if (savedStatus || savedBuilder || savedProjectName) {
        $('#filterStatus').val(savedStatus);
        $('#filterBuilder').val(savedBuilder);
        $('#filterProjectName').val(savedProjectName);

        table.columns(1).search(savedProjectName || '');
        table.columns(3).search(savedBuilder || '');
        table.columns(5).search(savedStatus || '');

        table.draw();
    }
});




});
    </script>
    @endsection