@extends('layouts.master')





@section('title', 'Workload Arrangement Table for Age Range Add/Edit')

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

@section('script')
    <script></script>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        let rowIndex = 0;

        document.getElementById('addRow').addEventListener('click', function () {
            rowIndex++;

            let tableBody = document.querySelector('#exampless tbody');
            let firstRow = document.querySelector('.data-row');
            let newRow = firstRow.cloneNode(true);

            // อัปเดตเลข No.
            newRow.querySelector('.row-no').innerText = rowIndex + 1;

            // เคลียร์ค่า input + เปลี่ยน index
            newRow.querySelectorAll('input').forEach(function (input) {
                input.value = '';
                input.name = input.name.replace(/rows\[\d+\]/, 'rows[' + rowIndex + ']');
            });

            tableBody.appendChild(newRow);
        });

        // ลบแถว
        document.addEventListener('click', function (e) {
            if (e.target.classList.contains('btn-remove')) {
                let rows = document.querySelectorAll('.data-row');
                if (rows.length > 1) {
                    e.target.closest('tr').remove();

                    // รีเรียง No.
                    document.querySelectorAll('.row-no').forEach((td, i) => {
                        td.innerText = i + 1;
                    });
                }
            }
        });
    });
    </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('/age_typelist') }}">Age Range Type</a></li>
			<li class="breadcrumb-item"><a href="{{ url('/wagelist') }}">Workload Arrangement Table for Age Range (Special)</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 method="post" action="{{ url('/wageedit') }}">
                                        {{ csrf_field() }}

                                        <input type="hidden" name="age_type_id" value="{{ $age_type->age_type_id }}">

                                        {{-- Age Range Type  Header --}}
                                        <div class="mb-4">
                                            <label>Age Range Type</label>
                                            <input type="text"
                                                class="form-control"
                                                value="{{ $age_type->age_type_name }}"
                                                readonly>

                                            <input type="hidden"
                                                name="age_type_id"
                                                value="{{ $age_type->age_type_id }}">
                                        </div>

                                        <hr>

                                        <table class="table table-bordered">
                                            <thead class="table-light">
                                                <tr>
                                                    <th style="width:40%">Workload Arrangement</th>
                                                    <th style="width:30%">Unit</th>
                                                    <th style="width:30%">Value</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                            @foreach($WAages as $w)

                                                @php
                                                    $existing = $wages
                                                        ->where('wage_name', $w->WAage_id)
                                                        ->first();
                                                @endphp

                                                <tr>

                                                    {{-- Workload Arrangement Name --}}
                                                    <td>
                                                       {{ $w->WAage_title }}
                                                    </td>

                                                    {{-- Unit --}}
                                                   
                                                    <td>
                                                        {{ $w->unit_name ?? '-' }}
                                                    </td>

                                                    {{-- Value --}}
                                                    <td>
                                                        <input type="text"
                                                            name="wage_value[{{ $w->WAage_id }}]"
                                                            class="form-control"
                                                            value="{{ $existing->wage_value ?? '' }}" required>
                                                    </td>

                                                </tr>

                                            @endforeach

                                            </tbody>
                                        </table>

                                        <div class="text-center mt-4">
                                            <button type="submit" class="btn btn-primary rounded-pill">
                                                Save
                                            </button>
                                        </div>

                                    </form>


                                   
								</div>
							</div>

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

           
           
        </div>
    </section>

        @include('layouts.footer')

    @endsection