@extends('layouts.app')

@section('page-pretitle', __('Management'))
@section('page-title', __('Project Details'))

@section('content')

<style>
    .btn-hover-red:hover, .btn-hover-grey:focus {
        background-color: #dc3545 !important;
        color: #fff !important;
    }
    .btn-hover-yellow:hover, .btn-hover-grey:focus {
        background-color: #ffc107 !important;
        color: #fff !important;
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="row row-cards">
    <div class="col-12">

        <div class="card shadow-sm p-4">
            <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center mb-4">
                <div class="d-flex flex-column flex-sm-row justify-content-start align-items-center mb-4">
                    <h3 class="h3 text-primary mb-3 mb-sm-0">
                        <i class="ti ti-info-circle"></i> {{ $project->ref_no ?? '-'}}
                    </h3>
                    <div class="text-primary fw-bold mb-1 my-1">
                        @if ($project->is_registration)
                            <span class="badge badge-outline text-teal mx-2">Registered</span>
                        @endif
                    </div>  
                </div>
                <div class="d-flex flex-column flex-sm-row justify-content-end align-items-center mb-4">
                    <div class="mx-2 mb-2 mb-sm-0">
                        {{-- Download All as PDF --}}
                        <button class="btn btn-icon shadow-sm btn-hover-yellow btn-outline-yellow bg-yellow-lt me-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#showNotesPanel" title="{{ __('View License & Renewal') }}">
                            <i class="ti ti-info-hexagon"></i>
                        </button>
                        <a href="{{ route('projects.downloadPdf', $project->id) }}" class="btn btn-icon shadow-sm btn-hover-red btn-outline-danger bg-red-lt" title="{{ __('Download PDF') }}">
                            <i class="ti ti-file-type-pdf" style="font-size: 1.4em;"></i>
                        </a>
                    </div>
                    @php
                        $previousUrl = url()->previous();
                        $bookmarkUrl = route('bookmark.index');
                    @endphp

                    <a href="{{ Str::startsWith($previousUrl, $bookmarkUrl) ? $bookmarkUrl : url()->previous() }}" class="btn btn-outline-secondary">
                        {{ __('Back') }}
                    </a>
                </div>
            </div>        

            <div class="row">
                <div class="col-md-6">
                    <!-- Description -->
                    <div class="mb-4">
                        <h4 class="mb-2">
                            <i class="ti ti-file-description"></i> {{ __('Project Description') }}
                        </h4>
                        <p class="text-dark text-uppercase text-justify">{{ $project->description }}</p>
                    </div>


                </div>

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

                    <!-- Client -->
                    <div class="mb-4">
                        <h4 class="mb-2">
                            <i class="ti ti-user"></i> {{ __('Client') }}
                        </h4>
                        <p class="text-dark">{{ $project->client }}</p>
                    </div>

                    <!-- Scope & Project Type -->
                    <div class="row mb-4">
                        <!-- Scope -->
                        <div class="col-md-4">
                            <h4 class="">
                                <i class="ti ti-clipboard-list"></i> {{ __('Scope') }}
                            </h4>
                            <p class="text-dark">{{ $project->scope->name ?? __('N/A') }}</p>
                        </div>

                        <!-- Project Type -->
                        <div class="col-md-4">
                            <h4><i class="ti ti-list-check"></i> {{ __('Project Type') }}</h4>
                            <p class="text-dark">{{ $project->project_type->name ?? __('-') }}</p>
                        </div>

                        <!-- Project Phase -->
                        <div class="col-md-4">
                            <h4><i class="ti ti-list-check"></i> {{ __('Project Phase') }}</h4>
                            <p class="text-dark">{{ $project->project_phase->name ?? __('-') }}</p>
                        </div>

                    </div>

                    

                    <!-- Dates -->
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <h4 class="mb-2">
                                <i class="ti ti-calendar-repeat"></i> {{ __('Received Year') }}
                            </h4>
                            <p class="text-dark">{{ $project->received_year ?? __('-') }}</p>
                        </div>
                        <div class="col-md-4">
                            <h4 class="mb-2">
                                <i class="ti ti-calendar-event"></i> {{ __('Start Date') }}
                            </h4>
                            <p class="text-dark">{{ $project->start_date ? $project->start_date->format('d-m-Y') : __('-') }}</p>
                        </div>
                        <div class="col-md-4">
                            <h4 class="mb-2">
                                <i class="ti ti-calendar-check"></i> {{ __('End Date') }}
                            </h4>
                            <p class="text-dark">{{ $project->end_date ? $project->end_date->format('d-m-Y') : __('-') }}</p>
                        </div>
                    </div>
                </div>

                <!-- Assignees -->
                <div class="mb-4">
                    <h4 class="mb-2">
                        <i class="ti ti-users"></i> {{ __('Assignees') }}
                    </h4>

                    @if ($project->assignees->isEmpty())
                        <p class="text-dark text-muted">{{ __('No Assignees') }}</p>
                    @else
                        <div class="row">
                            @foreach ($project->assignees as $assignee)
                                <div class="col-auto mb-2 d-flex align-items-center">
                                    <i class="ti ti-user me-1"></i> 
                                    <span class="badge badge-outline text-blue"">{{ $assignee->name }}</span>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                <div class="col-12">
                    <!-- Submission Types -->
                    <div class="mb-4">
                        <h4 class="mb-2">
                            <i class="ti ti-archive"></i> {{ __('Submission Types') }}
                        </h4>
                    
                        @php
                            function getStatusClass($statusName) {
                                return match (strtolower($statusName)) {
                                    'in progress' => 'badge bg-blue-lt',
                                    'pending' => 'badge bg-red-lt',
                                    'completed' => 'badge bg-green-lt',
                                    'need review' => 'badge bg-yellow-lt',
                                    'not yet submitted' => 'badge bg-cyan-lt',
                                    default => 'badge bg-secondary-lt',
                                };
                            }
                        @endphp
                    

                        @if ($project->submissionTypes->isEmpty())
                            <p class="text-muted">{{ __('No Submission Types') }}</p>
                        @else
                            <div class="row g-3">
                                @foreach($project->submissionTypes as $submissionType)
                                    @if($submissionType->pivot)
                                        <div class="col-md-4">
                                            <div class="card shadow-sm p-3 h-100">
                                                <div>
                                                    <h4 class="text-primary mb-2">{{ strtoupper($submissionType->name) }}</h4>
                                                    <ul class="list-unstyled mb-0">
                                                        <li class="mb-1"><strong>{{ __('Date:') }}</strong> {{ $submissionType->pivot->submission_date ? \Carbon\Carbon::parse($submissionType->pivot->submission_date)->format('d-m-Y') : __('-') }}</li>
                                                        <li class="mb-1"><strong>{{ __('File No / ID:') }}</strong> {{ $submissionType->pivot->file_no ?? __('-') }}</li>
                                                        <li class="mb-1"><strong>{{ __('Status:') }}</strong>
                                                            @php
                                                                $statusName = $submissionType->pivot->status_id ? $statuses->firstWhere('id', $submissionType->pivot->status_id)?->name : null;
                                                            @endphp
                                                            @if($statusName)
                                                                <span class="badge {{ getStatusClass($statusName) }}">
                                                                    {{ Str::title($statusName) }}
                                                                </span>
                                                            @else
                                                                {{ __('-') }}
                                                            @endif
                                                        </li>
                                                        <li class="mb-1"><strong>{{ __('Remarks:') }}</strong> {{ $submissionType->pivot->remarks ?? __('-') }}</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        @endif
                            </div>
                    </div>


                    <!-- Remarks -->
                    <div class="mt-2">
                        <h4 class="mb-2">
                            <i class="ti ti-bookmarks"></i> {{ __('Remarks') }}
                        </h4>
                        <p class="text-dark {{ $project->remarks ? '' : 'text-muted' }}">
                            {{ $project->remarks ?? __('No Remark') }}
                        </p>
                    </div>

                    {{-- Project Timeline Table --}}
                    <div class="mt-2">
                        <h4 class="mb-2">
                            <i class="ti ti-timeline"></i> {{ __('Timeline') }}
                        </h4>

                        @php
                            // Fetch and order timelines
                            $timelines = $project->timelines;
                        @endphp

                        @if($timelines->isEmpty())
                            <p class="text-muted">{{ __('No Timeline') }}</p>
                        @else
                            <div class="table-responsive">
                                <table class="table table-sm table-bordered align-middle mb-0" style="font-size: 12px;">
                                    <thead class="table-light">
                                        <tr>
                                            <th class="text-start" style="padding: 6px;">{{ __('Date') }}</th>
                                            <th style="min-width: 150px; padding: 6px;">{{ __('Remark') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($timelines as $timeline)
                                            <tr>
                                                <td style="padding: 6px;font-size:14px;">
                                                    <div style="text-align: start;">
                                                        @if ($timeline->timeline_date)
                                                            {{ \Carbon\Carbon::parse($timeline->timeline_date)->format('d M Y') }}
                                                        @else
                                                            -
                                                        @endif
                                                    </div>
                                                </td>
                                                <td style="padding: 6px;font-size:14px;">{{ $timeline->remark }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endif
                    </div>

                    @push('styles')
                    <style>
                        .table-responsive {
                            overflow-x: auto;
                            -webkit-overflow-scrolling: touch;
                        }

                        .table td {
                            vertical-align: middle;
                        }

                        .d-flex {
                            display: flex;
                        }
                    </style>
                    @endpush

                    {{-- Images --}}
                    <div class="card mt-4">
                        <div class="card-header">
                            <h3 class="card-title">Uploaded Images</h3>
                        </div>
                        <div class="card-body">
                            @php
                                $images = $project->documents->filter(fn($doc) => Str::endsWith($doc->path, ['jpg', 'jpeg', 'png']))->values();
                            @endphp
                            @if($images->isEmpty())
                                <p class="col-12 text-center text-muted">No images uploaded</p>
                            @else
                                @foreach($images->chunk(4) as $row)
                                    <div class="row mb-3">
                                        @foreach($row as $image)
                                            <div class="col-md-3 mb-3">
                                                <a href="{{ asset('storage/' . $image->path) }}" target="_blank" style="text-decoration: none;">
                                                    <div class="card shadow-sm h-100">
                                                        <img src="{{ asset('storage/' . $image->path) }}"
                                                            class="card-img-top rounded"
                                                            alt="{{ $image->original_name }}"
                                                            style="width: 100%; height: 200px; object-fit: cover;">
                                                        <div class="card-body p-2">
                                                            <div style="font-size: 12px; font-family: monospace; word-break: break-all; text-align: center;">
                                                                {{ $image->original_name }}
                                                                @if($image->uploaded_at)
                                                                    <br>
                                                                    <span style="color: #888;">{{ \Carbon\Carbon::parse($image->uploaded_at)->format('d-m-Y') }}</span>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        @endforeach
                                        @for($i = $row->count(); $i < 4; $i++)
                                            <div class="col-md-3 mb-3"></div>
                                        @endfor
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                                    
                    {{-- Other Files --}}
                    <div class="card mt-4">
                        <div class="card-header">
                            <h3 class="card-title">Uploaded Files</h3>
                        </div>
                        @php
                            // Only non-image files
                            $files = $project->documents->filter(function($doc) {
                                return Str::endsWith($doc->path, ['pdf', 'docx', 'txt', 'xls', 'xlsx', 'zip']);
                            });
                        @endphp
                        @if($files->isEmpty())
                            <div class="card-body">
                                <p class="col-12 text-center text-muted mt-3">No files uploaded</p>
                            </div>
                        @else
                            <ol class="list-unstyled">
                                @php $fileNumber = 1; @endphp
                                @foreach ($files as $doc)
                                    <li class="d-flex align-items-center mb-1">
                                        <span class="me-3">{{ $fileNumber++ }}.</span>
                                        <a href="{{ asset('storage/' . $doc->path) }}" target="_blank" style="text-decoration: none;">
                                            <div class="d-flex align-items-center">
                                                {{-- File Icons --}}
                                                @if (Str::endsWith($doc->path, 'pdf'))
                                                    <i class="fa fa-file-pdf text-danger" style="font-size: 30px;"></i>
                                                @elseif (Str::endsWith($doc->path, ['docx', 'doc']))
                                                    <i class="fa fa-file-word text-primary" style="font-size: 30px;"></i>
                                                @elseif (Str::endsWith($doc->path, ['xls', 'xlsx']))
                                                    <i class="fa fa-file-excel text-success" style="font-size: 30px;"></i>
                                                @elseif (Str::endsWith($doc->path, 'zip'))
                                                    <i class="fa fa-file-archive text-warning" style="font-size: 30px;"></i>
                                                @else
                                                    <i class="fa fa-file" style="font-size: 30px;"></i>
                                                @endif
                                                <p class="mt-2 ms-3 mb-0">{{ $doc->original_name }}</p>
                                            </div>
                                        </a>
                                    </li>
                                @endforeach
                            </ol>
                        @endif
                    </div>

                </div>
            </div>

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


{{-- sidebar off canvas for important notes --}}
<div class="offcanvas offcanvas-end" tabindex="-1" id="showNotesPanel" aria-labelledby="showNotesPanelLabel">
    <div class="offcanvas-header bg-dark text-white">
        <h5 class="offcanvas-title" id="showNotesPanelLabel">
            <i class="ti ti-info-hexagon me-1"></i> License & Renewal
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>

    <div class="offcanvas-body">
        <div class="card shadow-sm">
            @if ($project->notes->count())
                <ul class="list-group list-group-flush">
                @foreach ($project->notes->sortBy('notes_duedate') as $note)
                    @php
                        $dueDate = \Carbon\Carbon::parse($note->notes_duedate);
                        $isDueToday = $dueDate->isToday();
                        $isPastDue = $dueDate->isPast() && !$isDueToday;
                        $isUrgent = $isDueToday || $isPastDue;
                        // $cardBgClass = $isUrgent ? 'bg-danger-subtle' : '';
                    @endphp

                    <li class="list-group-item position-relative ps-4">
                        @if ($isUrgent)
                            <div class="position-absolute start-0 top-0 bottom-0 bg-danger" style="width: 4px; border-top-left-radius: .375rem; border-bottom-left-radius: .375rem;"></div>
                        @endif

                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h4 class="mb-0">{{ ucfirst($note->notes) }}</h4>
                            <small class="text-muted ms-3">
                                Due by <strong>{{ $dueDate->format('d M Y') }}</strong>
                            </small>
                        </div>
                    </li>
                @endforeach
                </ul>
            @else
                <p class="text-muted m-2">No license & renewal found for this project.</p>
            @endif
        </div>
    </div>
</div>
@endsection