@php
    $breadcrumbs = [
        'Memo' => url('/memo_list'),
        $project->project_name => ''
    ];

    // 5 ช่วงของโปรเจกต์ — กดเข้าไปแต่ละหัวข้อจะไปหน้าของหัวข้อนั้นโดยเฉพาะ (memo_stage1 ... memo_stage5)
    // ชื่อภาษาอังกฤษที่ใช้แสดงผล + คำอธิบายไทยสั้นๆ ใต้ชื่อ
    $stages = [
        1 => ['title' => 'Project Initiation',   'subtitle' => 'ก่อนเริ่มโปรเจกต์ — ตกลงขอบเขตงานก่อนเริ่มทำ',        'active' => true],
        2 => ['title' => 'Project Execution',    'subtitle' => 'ระหว่างดำเนินโปรเจกต์',                              'active' => false],
        3 => ['title' => 'Completion Evidence',  'subtitle' => 'หลักฐานงานเสร็จสิ้น — เอกสารยืนยันว่าส่งมอบงานแล้ว', 'active' => false],
        4 => ['title' => 'Maintenance',          'subtitle' => 'ระหว่าง Maintenance — เอกสารช่วงดูแลระบบหลังส่งมอบ', 'active' => false],
        5 => ['title' => 'Maintenance Closure',  'subtitle' => 'หลักฐานจบ Maintenance',                              'active' => false],
    ];
@endphp
@extends('layouts.master')

@section('title')
    {{ $project->project_name }}
@endsection

@section('style')
    <style>
        .memo-doc-item {
            display: flex; align-items: center; justify-content: space-between;
            border: 1px solid #eee; border-radius: 12px; padding: 16px 20px; margin-bottom: 10px;
            text-decoration: none; color: inherit;
        }
        .memo-doc-item:hover { border-color: #6f42c1; background: #f8f7ff; color: inherit; }
        .memo-doc-item.is-disabled { background: #fafafa; color: #adb5bd; cursor: not-allowed; }
        .memo-doc-item.is-disabled:hover { border-color: #eee; background: #fafafa; }

        .stage-badge {
            width: 30px; height: 30px; min-width: 30px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 13px; background: #6f42c1; color: #fff; margin-right: 14px;
        }
        .memo-doc-item.is-disabled .stage-badge { background: #dee2e6; color: #868e96; }
    </style>
@endsection

@section('content')

<section class="wrapper bg-light">
    <div class="container py-14">

        <div class="card">
            <div class="card-body">

                <h5 class="display-1 mb-1" style="font-size:25px">{{ $project->project_name }}</h5>

                <p class="text-muted mb-4">
                    Status:
                    @if($project->status === 'On going')
                        <span class="badge bg-green">On going</span>
                    @elseif($project->status === 'Draft')
                        <span class="badge bg-secondary">Draft</span>
                    @elseif($project->status === 'Expired')
                        <span class="badge bg-danger">Expired</span>
                    @elseif($project->status === 'Maintenance')
                        <span class="badge bg-yellow">Maintenance</span>
                    @else
                        <span class="badge bg-secondary">{{ $project->status }}</span>
                    @endif
                    &nbsp;•&nbsp;
                    Division: <strong>{{ $project->division->division_name ?? '—' }} ({{ $project->division->division_shortname ?? '—' }})</strong>
                </p>

                <p class="text-muted small mb-3">ขั้นตอนของโปรเจกต์นี้ — กดเข้าไปเพื่อดูรายละเอียดของแต่ละช่วง</p>

                {{-- แต่ละหัวข้อกดเข้าไปหน้าของตัวเอง (memo.stage) หัวข้อที่ยังไม่เปิดใช้งานกดไม่ได้ --}}
                @foreach($stages as $no => $stage)
                    @if($stage['active'])
                        <a href="{{ url('/memo/'.$project->id.'/stage/'.$no) }}" class="memo-doc-item">
                            <div class="d-flex align-items-center">
                                <div class="stage-badge">{{ $no }}</div>
                                <div>
                                    <div class="fw-bold">{{ $stage['title'] }}</div>
                                    <div class="text-muted small">{{ $stage['subtitle'] }}</div>
                                </div>
                            </div>
                            <div><i class="uil uil-angle-right-b"></i></div>
                        </a>
                    @else
                        <div class="memo-doc-item is-disabled">
                            <div class="d-flex align-items-center">
                                <div class="stage-badge">{{ $no }}</div>
                                <div>
                                    <div class="fw-bold">{{ $stage['title'] }}</div>
                                    <div class="small">{{ $stage['subtitle'] }} — ยังไม่เปิดให้ใช้งาน</div>
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach

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

@endsection