@extends('layouts.master')





@section('title', 'Work Flow Add/Edit')

@section('style')
    <style>
		/* .wf-item {
			background: #f8f9fa;
			padding: 10px;
			border-radius: 10px;
		} */
	</style>
@endsection

@section('script')
    <script>
		document.getElementById('add-more').onclick = function () {
		let item = document.querySelector('.wf-item').cloneNode(true);

			// 🔥 reset ค่า select
			item.querySelectorAll('select').forEach(select => {
				select.selectedIndex = 0;
			});

			document.getElementById('wf-group').appendChild(item);
		};

		// 🔥 ใช้ closest กันพลาด (กดโดน icon ก็ลบได้)
		document.addEventListener('click', function(e){
			let btn = e.target.closest('.remove');
				if(btn){
					let allItems = document.querySelectorAll('.wf-item');

					// 🔥 กันลบจนเหลือ 0 แถว
					if(allItems.length > 1){
						btn.closest('.wf-item').remove();
					}
				}
		});
	</script>
@endsection

@section('content')

@include('layouts.header')


	@include('layouts.title')
    <!-- <nav aria-label="breadcrumb" style="background-color:#f5f5f5; padding:10px 15px; border-radius:6px;">
        <ol class="breadcrumb" style="margin-bottom:0; background:none;">
            <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ url('/employee') }}">Employee Contract</a></li>
			<li class="breadcrumb-item"><a href="{{ url('/wflist') }}">Age Range Type</a></li>
            <li class="breadcrumb-item active" aria-current="page"
                style="color:#000; font-weight:700;">
                @yield('title')
            </li>
        </ol>
    </nav> -->

    <section class="wrapper bg-light">
        <div class="container py-15 py-md-17">


            <div class="col-md-12">
                <h5 class="display-1 mb-3" style="font-size: 30px">@yield('title')</h5>
                <p class="lead fs-lg pe-lg-15 pe-xxl-12"></p>
            </div>

            <div class="col-lg-12">
				<div class="blog single">
					<div class="card">
						<div class="card-body">
                        
							<div class="row">
								<div class="col-lg-12">

									<form class="contact-form" method="post" action="{{ url('/wfedit') }}" enctype="multipart/form-data">
										{{ csrf_field() }}

										<input type="hidden" name="wf_id" value="{{ $wf_id }}">
										
                						<div class="messages"></div>
										<div class="row gx-4">
											<div class="col-md-12">
												<div class="form-floating mb-4">
													<input id="wf_name" type="text" name="wf_name" class="form-control" placeholder="flow name" required value="{{ $wf_name }}" required>
													<label for="form_lastname">flow name *</label>
												</div>
											</div>

											<div id="wf-group">

												@if(isset($wf_steps) && count($wf_steps) > 0)

													@foreach($wf_steps as $step)
													<div class="row mb-2 wf-item align-items-center">

														<div class="col-md-5">
															<div class="form-floating">
																<select name="wf_position_id[]" class="form-select">
																	<option value="" disabled>Please select</option>
																	@foreach ($positions as $p)
																		<option value="{{ $p->admin_position_sub_id }}"
																			@if($p->admin_position_sub_id == $step->wf_position_id) selected @endif>
																			{{ $p->admin_position_sub_name }}
																		</option>
																	@endforeach
																</select>
																<label>Position</label>
															</div>
														</div>

														<div class="col-md-5">
															<div class="form-floating">
																<select name="wf_activity_id[]" class="form-select">
																	<option value="" disabled>Please select</option>
																	@foreach ($activities as $a)
																		<option value="{{ $a->wf_activity_id }}"
																			@if($a->wf_activity_id == $step->wf_activity_id) selected @endif>
																			{{ $a->wf_activity_name }}
																		</option>
																	@endforeach
																</select>
																<label>Activity</label>
															</div>
														</div>

														<div class="col-md-2 d-flex justify-content-center">
															<button type="button" class="btn btn-outline-danger remove">
																<i class="uil uil-trash"></i>
															</button>
														</div>

													</div>
													@endforeach

												@else

													{{-- create ใหม่ --}}
													<div class="row mb-2 wf-item align-items-center">

														<div class="col-md-5">
															<div class="form-floating">
																<select name="wf_position_id[]" class="form-select">
																	<option value="" disabled selected>Please select</option>
																	@foreach ($positions as $p)
																		<option value="{{ $p->admin_position_sub_id }}">
																			{{ $p->admin_position_sub_name }}
																		</option>
																	@endforeach
																</select>
																<label>Position</label>
															</div>
														</div>

														<div class="col-md-5">
															<div class="form-floating">
																<select name="wf_activity_id[]" class="form-select">
																	<option value="" disabled selected>Please select</option>
																	@foreach ($activities as $a)
																		<option value="{{ $a->wf_activity_id }}">
																			{{ $a->wf_activity_name }}
																		</option>
																	@endforeach
																</select>
																<label>Activity</label>
															</div>
														</div>

														<div class="col-md-2 d-flex justify-content-center">
															<button type="button" class="btn btn-outline-danger remove">
																<i class="uil uil-trash"></i>
															</button>
														</div>

													</div>

												@endif

												</div>

                
											<div style="clear: both"></div><br><br><br>
											<div class="col-12 mb-3">
												<button type="button" class="btn btn-success" id="add-more">
													+ Add Flow
												</button>
											</div>
											
											<div class="col-12 text-center">
												<input type="submit" class="btn btn-primary rounded-pill btn-send mb-3" value="Submit">
												<p class="text-muted"><strong>*</strong> These fields are required.</p>
											</div>
										
										</div>
									</form>
								</div>
							</div>

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

           
           
        </div>
    </section>


        @include('layouts.footer')

    @endsection