@extends('layout.master') @section('content')

<style>
    .image-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .image-row img {
        max-width: 100%;
        height: auto;
    }
    .acc-project {
        overflow-y: auto;
        height: 250px;
        max-height: 250px;
    }
    .header {
        height: 170px;
        overflow-y: auto;
        max-height: 170px;
    }
    .custom-margin {
        margin-right: 20rem;
    }
</style>
<div class="main-content app-content">
    <div class="container-fluid mt-3">
        <div class="">
            <div class="row row-sm">
                <div class="col-md-9">
                    <h4 class="main-content-title">
                        {{ $project->project_name ?? "no name" }}
                    </h4>
                    <div class="card custom-card header p-4">
                        <h5>Project Details:</h5>
                        <p class="p-2">
                            {{ $project->project_detail ?? "no name" }}
                        </p>
                    </div>
                </div>
                <div class="col-md-3">
                    <h4 class="main-content-title">Project Assigned</h4>
                    <div class="card custom-card header p-3">
                        <!-- <h5>Team Lead</h5> -->
                        @if (isset($project->projectTeam))
                            <div class=" align-items-center ps-2 m-0">

                                @foreach ($project->projectTeam as $pTeam)
                                <p class="m-0 p-0">Name: {{  $pTeam->user->name }}</p>

                                <img
                                    class="main-img-user online ms-5"
                                    title="{{  $pTeam->user->name }}"
                                    src="{{  $pTeam->user->profile }}"
                                    alt=""
                                />
                                @endforeach
                            </div>
                        @endif
                        
                       
                       
                    </div>

                    
                </div>
            </div>
            <div class="row row sm">
                <div class="d-flex justify-content-between align-items-center">
                    <h4 class="main-content-title mt-3">All Task</h4>
                    <button class="btn btn-primary w-auto custom-margin">
                        + Add Task
                    </button>
                </div>
                <div class="card custom-card">
                    <div class="card-body d-flex justify-content-between">
                        <div class="col-md-12">
                            <div class="accordion acc-project accordion-primary"  id="accordionPrimaryExample"  >
                                @foreach ($project->task as $key => $task)
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingPrimaryOne_{{ $key+1  }}" >
                                            <button class="accordion-button"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#collapsePrimaryOne_{{ $key+1  }}"
                                                aria-expanded="true"
                                                aria-controls="collapsePrimaryOne" >
                                                {{ $task->name?? "no name" }}
                                            </button>
                                        </h2>
                                        <div
                                            id="collapsePrimaryOne_{{ $key+1  }}"
                                            class="accordion-collapse collapse "
                                            aria-labelledby="headingPrimaryOne_{{ $key+1  }}"
                                            data-bs-parent="#accordionPrimaryExample" >
                                            <div class="accordion-body">
                                                {{ $task->task_detail?? "no description"  }}
                                            </div>

                                            <div class="col-md-3">

                                                <h4>Task Assigned:</h4>
                                                <ul>
                                                    @foreach ($task->taskteam as $team)
                                                    <li>{{ $team->user->name?? "no name" }}</li>
                                                    @endforeach 
                                                </ul>
                                                </div>

                                        </div>
                                    </div>


                                   
                                @endforeach
                            </div>
                        </div>
                       
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS (Ensure Only One Copy is Loaded) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</div>
<!-- jQuery CDN (Latest Version) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function () {
        var container = $("#ChatBody");
        container.scrollTop(container[0].scrollHeight);
    });

    // Accordian Task Names

    const firstAccordionBtn = document.querySelector(
        "#headingPrimaryOne .accordion-button"
    );
    const secondAccordionBtn = document.querySelector(
        "#headingPrimaryTwo .accordion-button"
    );
    const thirdAccordionBtn = document.querySelector(
        "#headingPrimaryThree .accordion-button"
    );

    const taskList = document.querySelector("#task-list");

    const updateNames = (names) => {
        taskList.innerHTML = "";

        names.forEach((name) => {
            const li = document.createElement("li");
            li.textContent = name;
            taskList.appendChild(li);
        });
    };

    firstAccordionBtn.addEventListener("click", () => {
        updateNames(["Hashir", "Shahzaib", "Saeed"]);
    });

    secondAccordionBtn.addEventListener("click", () => {
        updateNames(["Jawad", "Rameez", "Sameer"]);
    });

    thirdAccordionBtn.addEventListener("click", () => {
        updateNames(["random1", "random2", "random3"]);
    });
</script>
@endsection