@php
    if (empty($workflow)) {
        $workflow_id = '';
        $workflow_name = '';
        $workflow_role_id = [];
        $workflow_activity = []; // เพิ่มเพื่อรองรับการดึงข้อมูล Activity กรณีที่สร้างใหม่
        $workflow_order = '';
    } else {
        $workflow_id = $workflow->workflow_id;
        $workflow_name = $workflow->workflow_name;
        $workflow_order = $workflow->workflow_order;

        // แยกข้อมูล Role ID ออกเป็น Array จากข้อความ '///'
        $workflow_role_id = explode('///', $workflow->workflow_role_id);
        $workflow_role_id = array_map('intval', $workflow_role_id);

        // ดึงข้อมูล Activity (สมมติว่าเก็บบันทึกแยกด้วย '///' เช่นเดียวกันในฐานข้อมูล)
        if (isset($workflow->workflow_activity) && is_string($workflow->workflow_activity)) {
            $workflow_activity = explode('///', $workflow->workflow_activity);
        } else {
            // ในกรณีที่โครงสร้างเบื้องต้นยังไม่มีข้อมูล ให้สร้างเป็น Array เปล่ารอไว้ก่อน
            $workflow_activity = []; 
        }
    }

    // กำหนดจำนวนแถวเริ่มต้นที่แสดงผล (อย่างน้อยที่สุด 1 แถว)
    $rowCount = max(count($workflow_role_id), 1);

    $breadcrumbs = [
        'Workflow Manage' => url('/workflow_manage'),
        'Workflow List' => url('/workflow_list'),
        'Set Workflow' => '',
    ];
@endphp

@extends('layouts.master')
@section('title', 'Set Workflow')

@section('style')
    <style>
        /* สามารถเพิ่มสไตล์เพิ่มเติมสำหรับแถวได้ที่นี่ */
    </style>
@endsection

@section('script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const container = document.getElementById('workflow-container');
        const addBtn = document.getElementById('add-row');

        // เมื่อกดปุ่มระบบจะทำสำเนาจากแถวแรก เพื่อให้ได้ข้อมูลตัวเลือก $role ทั้งหมดโดยไม่ต้องเขียน HTML ซ้ำใน JS
        addBtn.addEventListener('click', function() {
            const firstRow = container.querySelector('.workflow-row');
            if (firstRow) {
                const newRow = firstRow.cloneNode(true);
                
                // เคลียร์ค่าที่เคยเลือกค้างไว้ให้เป็นค่าเริ่มต้น
                newRow.querySelectorAll('select').forEach(select => {
                    select.selectedIndex = 0;
                });
                
                container.appendChild(newRow);
                reorderRows();
            }
        });

        // จัดการเหตุการณ์เมื่อคลิกปุ่มลบแถว
        container.addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-row')) {
                const rows = container.querySelectorAll('.workflow-row');
                if (rows.length > 1) {
                    e.target.closest('.workflow-row').remove();
                    reorderRows();
                } else {
                    alert("ต้องมีอย่างน้อย 1 ขั้นตอน");
                }
            }
        });

        // ฟังก์ชันสำหรับจัดเรียงลำดับเลขข้อใหม่ให้ถูกต้องอัตโนมัติ
        function reorderRows() {
            const rows = container.querySelectorAll('.workflow-row');
            rows.forEach((row, index) => {
                row.querySelector('.count').innerText = index + 1;
            });
        }
    });
</script>
@endsection

@section('content')
    <section class="wrapper bg-light">
        <div class="container py-10">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <span class="text-dark fs-30">Set Workflow</span>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <form action="{{ url('/workflow_edit') }}" class="text-start mb-3" method="post" enctype="multipart/form-data">
                        @csrf

                        <input type="text" name="workflow_id" value="{{ $workflow_id }}" hidden>

                        <div class="row">
                            <div class="col-md-10"></div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-floating mb-4">
                                    <input id="textInputExample" type="text" class="form-control" placeholder="" name="workflow_name" value="{{ $workflow_name }}">
                                    <label for="textInputExample">Workflow Name*</label>
                                </div>
                            </div>

                            <div class="row mb-2 text-dark fw-bold d-none d-md-flex text-center">
                                <div class="col-md-1">No.</div>
                                <div class="col-md-6">Approve flow : Person</div>
                                <div class="col-md-4">Approve flow : Activity</div>
                                <div class="col-md-1"></div>
                            </div>

                            <div id="workflow-container">
                                @for($i = 0; $i < $rowCount; $i++)
                                <div class="row workflow-row mb-3 align-items-center">
                                    
                                    <div class="col-md-1 text-center count" style="padding: 13px">
                                        {{ $i + 1 }}
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-select-wrapper mb-2 mb-md-0">
                                            <select class="form-select" name="role[]" required>
                                                <option value="">----- Approve flow : Person -----</option>
                                                @foreach ($role as $r)
                                                    <option value="{{ $r->id }}" {{ (isset($workflow_role_id[$i]) && $workflow_role_id[$i] == $r->id) ? 'selected' : '' }}>
                                                        {{ $r->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-select-wrapper mb-2 mb-md-0">
                                            <select class="form-select" name="activity[]" required>
                                                <option value="">----- Approve flow : Activity -----</option>
                                                <option value="Approve" {{ (isset($workflow_activity[$i]) && $workflow_activity[$i] == 'Approve') ? 'selected' : '' }}>Approve</option>
                                                <option value="Check & Verify" {{ (isset($workflow_activity[$i]) && $workflow_activity[$i] == 'Check & Verify') ? 'selected' : '' }}>Check & Verify</option>
                                                <option value="Acknowledged" {{ (isset($workflow_activity[$i]) && $workflow_activity[$i] == 'Acknowledged') ? 'selected' : '' }}>Acknowledged</option>
                                                <option value="Skip" {{ (isset($workflow_activity[$i]) && $workflow_activity[$i] == 'Skip') ? 'selected' : '' }}>Skip</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-1 d-flex align-items-center justify-content-center">
                                        <button type="button" class="btn btn-danger btn-sm remove-row rounded-pill w-100 d-flex align-items-center justify-content-center" style="height: 42px;">
                                            Delete
                                        </button>
                                    </div>

                                </div>
                                @endfor
                            </div>

                            <div class="row mb-4">
                                <div class="col-md-1"></div>
                                <div class="col-md-11">
                                    <button type="button" id="add-row" class="btn btn-success btn-sm rounded-pill">+ Add Step</button>
                                </div>
                            </div>

                        </div>

                        <div align="center">
                            <input class="btn btn-blue rounded-pill" type="submit" name="submit" value="Submit">
                            <a class="btn btn-purple rounded-pill" href="{{ url('/workflow_list') }}" title="List">Back</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection