@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>

    //====================================================
    // Add Workflow Row
    //====================================================

    document
        .getElementById('add-more')
        ?.addEventListener(
            'click',
            function () {

                let firstItem =
                    document.querySelector('.wf-item');

                let item =
                    firstItem.cloneNode(true);


                item.querySelectorAll('select')
                    .forEach(function(select) {

                        select.selectedIndex = 0;

                    });


                item.querySelectorAll(
                    '.main-position-group, .sub-position-group'
                ).forEach(function(group) {

                    group.classList.add('d-none');

                });


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

            }
        );


    //====================================================
    // Remove
    //====================================================

    document.addEventListener(
        'click',
        function(e) {

            let btn =
                e.target.closest('.remove');


            if (!btn) {
                return;
            }


            let items =
                document.querySelectorAll('.wf-item');


            if (items.length > 1) {

                btn
                    .closest('.wf-item')
                    .remove();

            }

        }
    );


    //====================================================
    // Change Position Type
    //====================================================

    document.addEventListener(
        'change',
        function(e) {

            if (
                !e.target.classList.contains(
                    'position-type'
                )
            ) {
                return;
            }


            const row =
                e.target.closest('.wf-item');


            const type =
                e.target.value;


            const mainGroup =
                row.querySelector(
                    '.main-position-group'
                );


            const subGroup =
                row.querySelector(
                    '.sub-position-group'
                );


            const mainSelect =
                row.querySelector(
                    '.main-position-select'
                );


            const subSelect =
                row.querySelector(
                    '.sub-position-select'
                );


            // reset
            mainGroup.classList.add('d-none');

            subGroup.classList.add('d-none');

            // hide ทั้งสองก่อน
			mainGroup.classList.add('d-none');
			subGroup.classList.add('d-none');


			if (type === 'MAIN') {

				mainGroup.classList.remove('d-none');

			}


			if (type === 'SUB') {

				subGroup.classList.remove('d-none');

			}

        }
    );

</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> -->
	@if(session('error'))
		<div class="alert alert-danger">
			{{ session('error') }}
		</div>
	@endif
    <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 class="col-md-12">
												<div class="form-floating mb-4">
													<select id="wf_name" name="wf_name" class="form-select" required>

														<option value="" disabled 
															@if(empty($wf_name)) selected @endif>
															Please select
														</option>

														<option value="Administrative Position"
															@if($wf_name == 'Administrative Position') selected @endif>
															Administrative Position
														</option>
														<option value="Teaching Load"
															@if($wf_name == 'Teaching Load') selected @endif>
															Teaching Load
														</option>

													</select>

													<label for="wf_name">Flow Name *</label>
												</div>
											</div>

											<div id="wf-group">

												@php

													$steps =
														isset($wf_steps)
														&& count($wf_steps) > 0

															? $wf_steps

															: collect([null]);

												@endphp


												@foreach($steps as $step)

													@php

														$positionType =
															$step->wf_position_type
															?? 'FACULTY';


														$positionId =
															$step->wf_position_id
															?? null;

													@endphp


													<div class="row mb-3 wf-item align-items-center">


														{{-- ===================================== --}}
														{{-- Position Type --}}
														{{-- ===================================== --}}

														<div class="col-md-3">

															<div class="form-floating">

																<select
																	name="wf_position_type[]"
																	class="form-select position-type"
																	required>

																	<option
																		value=""
																		disabled>

																		Please select

																	</option>


																	<option
																		value="FACULTY"
																		@if($positionType == 'FACULTY')
																			selected
																		@endif>

																		Faculty

																	</option>


																	<option
																		value="MAIN"
																		@if($positionType == 'MAIN')
																			selected
																		@endif>

																		Main Position

																	</option>


																	<option
																		value="SUB"
																		@if($positionType == 'SUB')
																			selected
																		@endif>

																		Sub Position

																	</option>

																</select>


																<label>
																	Position Type
																</label>

															</div>

														</div>



														{{-- ===================================== --}}
														{{-- Main Position --}}
														{{-- ===================================== --}}

														<div
															class="col-md-3 main-position-group
																{{ $positionType == 'MAIN' ? '' : 'd-none' }}">

															<div class="form-floating">

																<select name="wf_main_position_id[]" class="form-select main-position-select">

																	<option
																		value=""
																		selected>

																		Please select

																	</option>


																	@foreach($mainPositions as $p)

																		<option
																			value="{{ $p->admin_position_id }}"

																			@if(
																				$positionType == 'MAIN'
																				&&
																				$positionId == $p->admin_position_id
																			)
																				selected
																			@endif>

																			{{ $p->admin_position_name }}

																		</option>

																	@endforeach

																</select>


																<label>
																	Main Position
																</label>

															</div>

														</div>



														{{-- ===================================== --}}
														{{-- Sub Position --}}
														{{-- ===================================== --}}

														<div
															class="col-md-3 sub-position-group
																{{ $positionType == 'SUB' ? '' : 'd-none' }}">

															<div class="form-floating">

																<select
																	name="wf_sub_position_id[]"
																	class="form-select sub-position-select">

																	<option
																		value=""
																		selected>

																		Please select

																	</option>


																	@foreach($subPositions as $p)

																		<option
																			value="{{ $p->admin_position_sub_id }}"

																			@if(
																				$positionType == 'SUB'
																				&&
																				$positionId == $p->admin_position_sub_id
																			)
																				selected
																			@endif>

																			{{ $p->admin_position_name }}

																			-

																			{{ $p->admin_position_sub_name }}

																		</option>

																	@endforeach

																</select>


																<label>
																	Sub Position
																</label>

															</div>

														</div>



														{{-- ===================================== --}}
														{{-- Activity --}}
														{{-- ===================================== --}}

														<div class="col-md-3">

															<div class="form-floating">

																<select
																	name="wf_activity_id[]"
																	class="form-select"
																	required>

																	<option
																		value=""
																		disabled
																		@if(!$step)
																			selected
																		@endif>

																		Please select

																	</option>


																	@foreach($activities as $a)

																		<option
																			value="{{ $a->wf_activity_id }}"

																			@if(
																				$step
																				&&
																				$a->wf_activity_id
																				==
																				$step->wf_activity_id
																			)
																				selected
																			@endif>

																			{{ $a->wf_activity_name }}

																		</option>

																	@endforeach

																</select>


																<label>
																	Activity
																</label>

															</div>

														</div>



														{{-- Delete --}}

														<div class="col-md-1 text-center">

															<button
																type="button"
																class="btn btn-circle btn-red remove">

																<i class="uil uil-trash"></i>

															</button>

														</div>


													</div>

												@endforeach

											</div>

                
											<div style="clear: both"></div><br><br><br>
											<div class="col-12 mb-3">
												<button type="button" class="btn btn-green rounded-pill" 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