@php $pageName = "activities";
$subpageName = "track-activity"; @endphp

@extends('layouts.app')

@section('css')

    <style>
        .displayContent {
            display: none;
        }

        .displayContent.active {
            display: block;
        }
    </style>

@endsection

@section('content')

    <div class="content" style="transform: none;">
        <div class="row" style="transform: none;">
            <!-- Page Header -->
            <div class="col-md-12">
                <div class="d-md-flex d-block align-items-center justify-content-between mb-3">
                    <div class="my-auto mb-2">
                        <h3 class="page-title mb-1">Track Activity</h3>
                       
                    </div>
                  
                </div>

            </div>
            <!-- /Page Header -->
            <div class="col-xxl-3 col-lg-4 "
                style="position: relative; overflow: visible; box-sizing: border-box; min-height: 1px;">



                <div class="" style="padding-top: 0px; padding-bottom: 1px; position: static; transform: none;">
                    <div class="card border-white">
                       
                        <div class="card-body">
                            <h5 class="mb-3">Main Details</h5>
                            <dl class="row mb-0">
                                <dt class="col-6 fw-medium text-dark mb-3"><b>Activity</b></dt>
                                <dd class="col-6  mb-3">{{ $data->title ?? '' }}</dd>
                                <dt class="col-6 fw-medium text-dark mb-3"><b>Description</b></dt>
                                <dd class="col-6  mb-3">{{ $data->description ?? '' }}</dd>
                                <dt class="col-6 fw-medium text-dark mb-3"><b>Objective</b></dt>
                                <dd class="col-6  mb-3">{{ $data->objective->title ?? 'N/A' }}</dd>
                                <dt class="col-6 fw-medium text-dark mb-3"><b>Output</b></dt>
                                <dd class="col-6  mb-3">{{ $data->output->title ?? 'N/A' }}</dd>
                                <dt class="col-6 fw-medium text-dark mb-3"><b>Activity Target</b></dt>
                                <dd class="col-6  mb-3">{{ $data->target ?? 'N/A' }}</dd>
                                <dt class="col-6 fw-medium text-dark mb-3"><b>End Date</b></dt>
                                <dd class="col-6  mb-3">{{$data->end_month ?? ''}} {{$data->end_year ?? ''}}</dd>
                              

                            </dl>
                        </div>
                    </div>
                    <div class="card border-white">

                    </div>
                    <div dir="ltr" class="resize-sensor"
                        style="pointer-events: none; position: absolute; inset: 0px; overflow: hidden; z-index: -1; visibility: hidden; max-width: 100%;">
                        <div class="resize-sensor-expand"
                            style="pointer-events: none; position: absolute; inset: 0px; overflow: hidden; z-index: -1; visibility: hidden; max-width: 100%;">
                            <div
                                style="position: absolute; left: 0px; top: 0px; transition: all; width: 324px; height: 736px;">
                            </div>
                        </div>
                        <div class="resize-sensor-shrink"
                            style="pointer-events: none; position: absolute; inset: 0px; overflow: hidden; z-index: -1; visibility: hidden; max-width: 100%;">
                            <div
                                style="position: absolute; left: 0px; top: 0px; transition: all; width: 200%; height: 200%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xxl-9 col-lg-8">
                <div class="row">
                    <div class="col-md-12" id="sidebar-menu5">
                        <ul class="nav nav-tabs nav-tabs-bottom mb-4">
                            <li data-target="content1">
                                <a class="nav-link" href="javascript:void(0);"><i
                                        class="ti ti-clipboard-check ti-sm me-1_5"></i>Status</a>
                            </li>
                            <li data-target="content3">
                                <a class="nav-link" href="javascript:void(0);"><i
                                        class="ti ti-package me-2"></i>Resource</a>
                            </li>
                           

                        </ul>
                    </div>
                </div>
                <div id="tab-content">
                    <div id="content1" class="displayContent active">

                        <div class="row">
                            <div class="col-xxl-12 d-flex">
                                <div class="card flex-fill">
                                    <div class="card-header">
                                        <h5>Status</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table table-bordered table-striped">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Comment</th>
                                                        <th>Status</th>
                                                        <th>Date</th>
                                                        <th>Evidence</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse($data->feedbacks as $feedback)
                                                        <tr>
                                                            <td>{{ $loop->iteration }}</td>
                                                            <td>{{ $feedback->comment ?? 'N/A' }}</td>
                                                            <td>{{ $feedback->status ?? 'N/A' }}</td>
                                                            <td>{{ $feedback->created_at ? $feedback->created_at->format('Y-m-d') : 'N/A' }}</td>
                                                            <td>
                                                                @if($feedback->evidence)
                                                                    <a href="{{ asset($feedback->evidence) }}" target="_blank" class="btn btn-sm btn-primary">View File</a>
                                                                @else
                                                                    N/A
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="5" class="text-center">No feedbacks found.</td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                   
                    
                    <div id="content3" class="displayContent">

                        <div class="row">
                            <div class="col-xxl-12 d-flex">
                                <div class="card flex-fill">
                                    <div class="card-header">
                                        <h5>Resources</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table class="table table-bordered table-striped">
                                                <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Resource Title</th>
                                                        <th>Description</th>
                                                        <th>Responsible</th>
                                                        <th>Status</th>
                                                        <th>Comment</th>
                                                        <th>Date</th>
                                                        <th>Evidence</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse($data->resources as $resource)
                                                        <tr>
                                                            <td>{{ $loop->iteration }}</td>
                                                            <td>{{ $resource->resource ?? 'N/A' }}</td>
                                                            <td>{{ $resource->description ?? 'N/A' }}</td>
                                                            <td>{{ $resource->responsible ?? 'N/A' }}</td>
                                                            <td>{{ $resource->status ?? 'N/A' }}</td>
                                                            <td>{{ $resource->comment ?? 'N/A' }}</td>
                                                            <td>{{ $resource->created_at ? $resource->created_at->format('Y-m-d') : 'N/A' }}</td>
                                                            <td>
                                                                @if($resource->evidence)
                                                                    <a href="{{ asset($resource->evidence) }}" target="_blank" class="btn btn-sm btn-primary">View File</a>
                                                                @else
                                                                    N/A
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="8" class="text-center">No resources found.</td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                  

                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        const items = document.querySelectorAll("#sidebar-menu5 li[data-target]");
        const contents = document.querySelectorAll("#tab-content .displayContent");

        items.forEach(item => {
            item.addEventListener("click", () => {
                const targetId = item.getAttribute("data-target");

                contents.forEach(content => content.classList.remove("active"));

                const target = document.getElementById(targetId);
                if (target) {
                    target.classList.add("active");
                } else {
                    console.warn("No element found with ID:", targetId);
                }
            });
        });

    </script>
@endsection