@php
    $breadcrumbs = [
        'Workflow Manage' => url('/workflow_manage'),
        'Workflow List' => url('/workflow_list'),
        'Set Workflow' => '',
    ];
@endphp
@extends('layouts.master')
@section('title', 'Set PDF')

@section('style')
    <style></style>
@endsection

@section('script')
    <script>
    $(document).ready(function() {
        let setIndex = 1; // เริ่มนับตัวต่อไปที่ index 1

        $(document).on('click', '.add-more', function() {
            // ค้นหาต้นฉบับที่จะก๊อปปี้ (กล่องแรกสุด)
            let template = $('.pdf-item').first().clone();

            // ล้างค่าใน input และ checkbox ของตัวที่ก๊อปมา
            template.find('input[type="text"]').val('');
            template.find('input[type="checkbox"]').prop('checked', false);

            // เปลี่ยน name และ id ให้เป็น index ใหม่ เพื่อไม่ให้ค่าซ้ำกัน
            template.find('input, label').each(function() {
                // เปลี่ยนชื่อ name จาก [0] เป็น [index ใหม่]
                if ($(this).attr('name')) {
                    let newName = $(this).attr('name').replace(/\[\d+\]/g, '[' + setIndex + ']');
                    $(this).attr('name', newName);
                }
                
                // เปลี่ยน id และ for เพื่อให้คลิก label แล้ว checkbox ยังทำงานได้
                if ($(this).attr('id')) {
                    let newId = $(this).attr('id').replace(/_\d+_/, '_' + setIndex + '_');
                    $(this).attr('id', newId);
                }
                if ($(this).attr('for')) {
                    let newFor = $(this).attr('for').replace(/_\d+_/, '_' + setIndex + '_');
                    $(this).attr('for', newFor);
                }
            });

            // เพิ่มปุ่ม Remove สำหรับกล่องที่เพิ่มมาใหม่
            template.find('.add-more').parent().append('<button type="button" class="btn btn-danger btn-sm rounded-pill px-3 remove-item ms-2">Remove</button>');

            // นำกล่องใหม่ไปต่อท้าย container
            $('#pdf-container').append(template);
            setIndex++;
        });

        // ฟังก์ชันลบกล่อง
        $(document).on('click', '.remove-item', function() {
            $(this).closest('.pdf-item').remove();
        });
    });
</script>
@endsection

@section('content')
    {{-- @include('layouts.header') --}}
    {{-- <section class="video-wrapper bg-overlay bg-overlay-gradient px-12 mt-0 min-vh-60 bg-cover bg-image"
        data-image-src="{{ asset('/bg/bg_01_new.png') }}"
        style="background-image: url({{ asset('/bg/bg_01_new.png') }}); background-size: 100%; background-position: center;">
        <div class="video-content">
            <div class="container text-center">
                <div class="row">
                    <div class="col-lg-8 col-xl-6 text-center text-white mx-auto">
                        <h1 class="display-1 fs-54 text-white mb-5"><span class="rotator-zoom">Scholarship Program</span></h1>

                    </div>
                </div>
            </div>
        </div>
    </section> --}}

    {{-- @include('layouts.title') --}}

    <section class="wrapper bg-light">
        <div class="container py-10">
            <div class="d-flex justify-content-between align-items-center mb-5">
                <div>
                    <span class="text-dark fs-30 fw-bold">Set Workflow</span>
                </div>
                <div>
                    @php
                        $workflow_manage_pdf_expired = DB::table('workflow_manage_pdf')
                                            ->where('workflow_manage_pdf_wf',$wf_id)
                                            ->where('workflow_manage_pdf_status','expired')
                                            ->orderby('workflow_manage_pdf_id','desc')
                                            ->first();
                    @endphp
                    @if(!empty($workflow_manage_pdf_expired) && $workflow_manage_pdf_expired->workflow_manage_pdf_status == 'expired')
                    <a href="{{ url('/workflow_manage_pdf_history', $wf_id) }}" class="btn btn-navy rounded-pill px-5">
                        <i class="uil uil-history"></i> View History
                    </a>
                    @endif
                      <a href="{{ url('/workflow_list') }}" class="btn btn-outline-dark rounded-pill btn-sm">
                            <i class="uil uil-arrow-left"></i> Back
                        </a>
                </div>
            </div>

            <div class="card shadow-sm">
                <div class="card-body p-8">
                   <form action="{{ url('/workflow_manage_pdf_edit') }}" method="post">
                        @csrf
                        <input type="hidden" name="wf_id" value="{{ $wf_id }}">
                        <input type="hidden" name="wf_pdf_id" value="{{ $wf_pdf_id }}">

                        <div id="pdf-container">
                            @foreach($items as $idx => $item)
                            <div class="pdf-item p-6 mb-4" style="border: 1px solid #e2e8f0; border-radius: 12px;">
                                <p class="fw-bold">Select Persons:</p>
                                @foreach($workflow_roles as $role)
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                            name="pdf_sets[{{ $idx }}][persons][]" 
                                            value="{{ $role['id'] }}"
                                            {{ in_array($role['id'], $item['selected_ids']) ? 'checked' : '' }}>
                                        <label class="form-check-label">{{ $role['name'] }}</label>
                                    </div>
                                @endforeach
                                
                                <div class="form-floating mt-3">
                                    <input type="text" class="form-control" name="pdf_sets[{{ $idx }}][duties]" value="{{ $item['duties'] }}">
                                    <label>Set Duties</label>
                                </div>

                                <div class="mt-3">
                                    <button type="button" class="btn btn-info btn-sm add-more">+ Add More</button>
                                    @if($idx > 0)
                                    <button type="button" class="btn btn-danger btn-sm remove-item">Remove</button>
                                    @endif
                                </div>
                            </div>
                            @endforeach
                        </div>

                        <button type="submit" class="btn btn-blue rounded-pill">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    {{-- @include('layouts.footer') --}}
@endsection