@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;
}
</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 p-2">
        <div class="d-flex justify-content-between align-items-center">
          <h4 class="main-content-title mt-3">All Task</h4>
          <a class="btn btn-primary w-auto custom-margin" href="{{  route('task.create') }}">+ Add Task</a>
        </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