@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: 32px; margin-right: 45px;">Projects</h1>
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="exportProjectButton"
                        data-toggle="dropdown" aria-expanded="false">
                        Export
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Excel</a>
                        <a class="dropdown-item" href="#">CSV</a>
                        <a class="dropdown-item" href="#">PDF</a>
                        <a class="dropdown-item" href="#" onclick="printLeads()">Print</a>
                    </div>
                    <button class="new-project" data-bs-toggle="modal" data-bs-target="#addNewProjectModal">
                        + New Project
                    </button>
                </div>
            </div>
        </div>

        <!-- Modal for Adding New Project -->
        <div class="modal fade" id="addNewProjectModal" tabindex="-1" aria-labelledby="addNewProjectModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addNewProjectModalLabel">Add New Project</h5>
                        {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        --}}
                        <button type="button" class="btn-close" 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="newProjectForm">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="projectName" class="form-label">Project Name</label>
                                    <input type="text" class="form-control" id="projectName" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="customer" class="form-label">Customer</label>
                                    <input type="text" class="form-control" id="customer" required>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="billingType" class="form-label">Billing Type</label>
                                    <select class="form-control" id="billingType" required>
                                        <option>Fixed Rate</option>
                                        <option>Project Hours</option>
                                        <option>Task Hours <h2>(Based on task hourly rate)</h2>
                                        </option>

                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="status" class="form-label">Status</label>
                                    <select class="form-control" id="status" required>
                                        <option>Not Started</option>
                                        <option>In Progress</option>
                                        <option>On Hold</option>
                                        <option>Cancelled</option>
                                        <option>Finished</option>
                                        <!-- Other status options -->
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="startDate" class="form-label">Start Date</label>
                                    <input type="date" class="form-control" id="startDate" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="deadline" class="form-label">Deadline</label>
                                    <input type="date" class="form-control" id="deadline">
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="members" class="form-label">Members</label>
                                    <select class="form-control" id="members" required>
                                        <option>Atul Bhilare</option>
                                        <option>Wasim Sayyed</option>
                                        <option>Sakshi Pisal</option>
                                        <option>Priyanka Chorat</option>
                                        <option>Komal Borse</option>
                                        <option>Shaheen Khan</option>
                                        <!-- Other status options -->
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="estimatedHours" class="form-label">Estimated Hours</label>
                                    <input type="text" class="form-control" id="estimatedHours">
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="tags" class="form-label">Tags</label>
                                <input type="text" class="form-control" id="tags">
                            </div>

                            <div class="mb-3">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control" id="description" rows="4"></textarea>
                            </div>

                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="sendEmailCheck">
                                <label class="form-check-label" for="sendEmailCheck">Send project created email</label>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        {{-- <button type="submit" class="btn btn-primary" form="newProjectForm">Save Project</button> --}}
                        <button type="button" class="btn btn-primary" id="save-btn">Save Project</button>
                    </div>
                </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="projectsTable">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Project Name</th>
                                    <th>Customer</th>
                                    <th>Tags</th>
                                    <th>Start Date</th>
                                    <th>Deadline</th>
                                    <th>Members</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="projectTableBody">
                                <!-- Assuming you have projects data passed from the controller -->
                                @foreach($projects as $project)
                                    <tr>
                                        <td>{{ $project->id }}</td>
                                        <td class="project-cell">
                                            <span class="project-name">{{ $project->name }}</span>
                                            <div class="edit-delete-buttons">
                                                <a href="#" class="edit-btn">Edit</a> |
                                                <a href="#" class="delete-btn">Delete</a>
                                            </div>
                                        </td>
                                        

                                        <td>{{ $project->customer }}</td>
                                        <td>{{ $project->tags }}</td>
                                        <td>{{ $project->start_date }}</td>
                                        <td>{{ $project->deadline }}</td>
                                        <td>{{ $project->members }}</td>
                                        <td>{{ $project->status }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

@endsection

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

            // const storedProjects = JSON.parse(localStorage.getItem('projects')) || [];
            // console.log("Stored Projects:", storedProjects); // Inspect the data here

            $('#projectsTable').DataTable({
                "processing": true,
                "serverSide": false, // Set true if you want to enable server-side processing
                "paging": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "searching": true,
                "lengthChange": true,
                "pageLength": 10,
                "language": {
                    "emptyTable": "No projects found",
                    "paginate": {
                        "previous": "<",
                        "next": ">"
                    }
                }
            });


            // Save new project
            $('#save-btn').on('click', function () {
                // Capture data from the modal form
                var id = $('#id').val();
                var projectName = $('#projectName').val();
                var customer = $('#customer').val(); // Capturing customer from the form
                var startDate = $('#startDate').val();
                var deadline = $('#deadline').val();
                var members = $('#members').val();
                var tags = $('#tags').val();
                var status = $('#status').val(); // Capturing status from the form

                // Get existing projects from localStorage
                var storedProjects = JSON.parse(localStorage.getItem('projects')) || [];

                // Create a new project object
                var newProject = {
                    id: storedProjects.length + 1,
                    projectName: projectName,
                    customer: customer, // Using actual customer from the form
                    startDate: startDate,
                    deadline: deadline,
                    members: members,
                    tags: tags,
                    status: status // Using actual status from the form
                };

                console.log(newProject); // Check if project is created correctly

                // Add the new project to the array and save it
                storedProjects.push(newProject);
                localStorage.setItem('projects', JSON.stringify(storedProjects));

                // Reload projects in the DataTable
                loadProjectsFromLocalStorage();

                // Optionally, close the modal
                $('#addNewProjectModal').modal('hide');
            });

            // Function to load projects from localStorage and populate the DataTable
            function loadProjectsFromLocalStorage() {
                var storedProjects = JSON.parse(localStorage.getItem('projects')) || [];
                var projectTable = $('#projectsTable').DataTable(); // Get DataTable instance

                // Clear the existing table rows
                projectTable.clear();

                // Loop through the projects and add rows to the DataTable
                storedProjects.forEach(function (project) {
                    projectTable.row.add([
                        project.id || 'N/A',          // Default to 'N/A' if id is undefined
                        project.projectName || 'N/A', // Default to 'N/A'
                        project.customer || 'N/A',
                        project.tags || 'N/A',
                        project.startDate || 'N/A',
                        project.deadline || 'N/A',
                        project.members || 'N/A',
                        project.status || 'N/A'
                    ]);

                });

                // Redraw the table with new data
                projectTable.draw();
            }

            // Call this function to load the existing projects on page load
            $(document).ready(function () {
                loadProjectsFromLocalStorage();
            });
            $(document).ready(function () {
                $('#projectsTable tbody').on('mouseenter', 'tr', function () {
                    $(this).find('.edit-delete-buttons').css('visibility', 'visible');
                }).on('mouseleave', 'tr', function () {
                    $(this).find('.edit-delete-buttons').css('visibility', 'hidden');
                });
            });




        });
    </script>
@endsection