@php
    $breadcrumbs = [
        'Memo' => url('/memo_list')
    ];
@endphp
@extends('layouts.master')

@section('title')
    Memo
@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; }
    </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-3" style="font-size:25px">Project List</h5>

                <div class="row">
                    <div class="col-12 d-flex justify-content-end align-items-center">
                        <button type="button" class="btn btn-sm btn-violet rounded-pill" id="btn-add-project"
                                data-bs-toggle="modal" data-bs-target="#memoProjectModal">
                            <i class="uil uil-plus"></i> Add Project
                        </button>
                    </div>
                </div>

                <br>

                <div class="table-responsive">
                    <table id="example" width="100%" class="table table-striped table-condensed">
                        <thead>
                            <tr>
                                <th width="5%">No.</th>
                                <th width="35%">Project Name</th>
                                <th width="15%">Status</th>
                                <th width="20%">Division</th>
                                <th width="25%"></th>
                            </tr>
                        </thead>
                       <tbody>
                            @foreach($projects as $key => $project)
                            <tr>
                                <td>{{ $key + 1 }}</td>
                                <td>{{ $project->project_name }}</td>
                                <td>
                                    @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
                                </td>
                                <td>{{ $project->division->division_shortname ?? '—' }}</td>
                                <td align="center">
                                    <a href="{{ url('/memo/'.$project->id) }}" class="btn btn-circle btn-blue btn-sm" title="เปิดโปรเจกต์">
                                        <i class="uil uil-eye"></i>
                                    </a>

                                    <button type="button"
                                            class="btn btn-circle btn-info btn-sm btn-edit-project"
                                            title="แก้ไข"
                                            data-id="{{ $project->id }}"
                                            data-bs-toggle="modal"
                                            data-bs-target="#memoProjectModal">
                                        <i class="uil uil-pen"></i>
                                    </button>

                                    <a href="{{ url('/memo/'.$project->id.'/delete') }}" class="btn btn-circle btn-danger btn-sm" title="ลบ"
                                       onclick="return confirm('ยืนยันการลบโปรเจกต์นี้? (TOR และข้อมูลข้างในจะถูกลบไปด้วยทั้งหมด)');">
                                        <i class="uil uil-trash-alt"></i>
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

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

    {{-- ============ Modal: Add / Edit Project (Bootstrap 5 เหมือนกับ discardModal ของ Quotation) ============ --}}
    <div class="modal fade" id="memoProjectModal" tabindex="-1" aria-labelledby="memoProjectModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg rounded-3">
                <form id="memoForm">
                    @csrf
                    <input type="hidden" id="memo_id" name="id">

                    <div class="modal-header bg-light border-0 py-4 px-5">
                        <h5 class="modal-title" id="memoProjectModalTitle" style="font-size: 18px; font-weight: 600;">Add Project</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body px-5 py-4">
                        <div class="mb-3">
                            <label class="form-label text-dark fw-bold" style="font-size:14px;" for="memo_project_name">ชื่อโปรเจกต์</label>
                            <input type="text" class="form-control bg-light border-0" id="memo_project_name" name="project_name" maxlength="255" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label text-dark fw-bold" style="font-size:14px;" for="memo_status">Status</label>
                            <select class="form-control bg-light border-0" id="memo_status" name="status">
                                <option value="On going">On going</option>
                                <option value="Draft">Draft</option>
                                <option value="Expired">Expired</option>
                                <option value="Maintenance">Maintenance</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label text-dark fw-bold" style="font-size:14px;" for="memo_division_id">Division</label>
                            <select class="form-control bg-light border-0" id="memo_division_id" name="division_id" required>
                                <option value="">— เลือก Division —</option>
                                @foreach($divisions as $division)
                                    <option value="{{ $division->division_id }}">{{ $division->division_name }} ({{ $division->division_shortname }})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="modal-footer border-0 bg-light d-flex justify-content-end py-3 px-5">
                        <button type="button" class="btn btn-sm btn-secondary rounded-pill me-2" data-bs-dismiss="modal" style="padding: 8px 20px;">
                            ยกเลิก
                        </button>
                        <button type="submit" class="btn btn-sm btn-violet rounded-pill" style="padding: 8px 20px;">
                            <i class="uil uil-check me-1"></i> บันทึก
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</section>

@endsection

@section('script')
<script>
    window.APP_BASE_URL = "{{ url('/') }}";

    document.addEventListener('DOMContentLoaded', function () {
        var urls = {
            store: "{{ url('/memo/store') }}",
            base:  "{{ url('/memo') }}/"   // + {id}/edit หรือ + {id}/update
        };

        var memoForm       = document.getElementById('memoForm');
        var memoModalTitle = document.getElementById('memoProjectModalTitle');

        // เปิด modal แบบ "เพิ่มใหม่" -> เคลียร์ฟอร์มให้ว่างก่อนเสมอ
        document.getElementById('btn-add-project').addEventListener('click', function () {
            memoModalTitle.textContent = 'Add Project';
            memoForm.reset();
            document.getElementById('memo_id').value = '';
        });

        // เปิด modal แบบ "แก้ไข" -> ดึงข้อมูลโปรเจกต์แถวนั้นมาเติมในฟอร์มก่อน
        document.querySelectorAll('.btn-edit-project').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var id = btn.getAttribute('data-id');
                fetch(urls.base + id + '/edit')
                    .then(function (res) { return res.json(); })
                    .then(function (project) {
                        memoModalTitle.textContent = 'แก้ไขโปรเจกต์';
                        document.getElementById('memo_id').value = project.id;
                        document.getElementById('memo_project_name').value = project.project_name;
                        document.getElementById('memo_status').value = project.status;
                        document.getElementById('memo_division_id').value = project.division_id;
                    });
            });
        });

        // ส่งฟอร์ม (สร้างใหม่ถ้า memo_id ว่าง, แก้ไขถ้ามี id)
        memoForm.addEventListener('submit', function (e) {
            e.preventDefault();
            var id  = document.getElementById('memo_id').value;
            var url = id ? (urls.base + id + '/update') : urls.store;

            fetch(url, {
                method: 'POST',
                body: new FormData(memoForm),
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            }).then(function (res) {
                if (!res.ok) { throw res; }
                location.reload();
            }).catch(function () {
                alert('กรุณาตรวจสอบข้อมูลที่กรอก');
            });
        });
    });
</script>
@endsection