@extends('layouts.master')
@section('content')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $('#emp_id').on('change', function() {
        const emp_id = $(this).val();

        $.ajax({
            url: '/fetch-field-value',
            method: 'GET',
            data: { emp_id: emp_id },
            success: function(response) {
                console.log("Response", response); // Log the response to debug
                const fullName = response.data.first_name + " " + response.data.last_name;
                $('#readonlyField').val(fullName);
            },
            error: function() {
                console.log("An error occurred");
            }
        });
    });
});
</script>


<div id='mainContent'>
            <div class="container-fluid">
<div class="row gap-20 masonry pos-r">
              <div class="masonry-sizer col-md-6"></div>
              <div class="masonry-item col-md-12">
                <div class="bgc-white p-20 bd">
                <a href="{{ route($routeBase.'.index') }}" class="btn btn-success btn-color ">Back</a>
            <br><br>
                  <h5 class="c-grey-900">{{$pageTitle}}</h5>   
                  <div class="mT-30">
                                
            

                  <form method="post" action="{{ route($routeBase.'.store') }}">
    @csrf

    @foreach($fields as $field_name => $label)
        @if($field_name != 'id' && $field_name != 'Actions' && $field_name != 'emp_id')
            <div class="mb-3">
                <label class="form-label" for="{{ $field_name }}">{{ $label }}</label>
                <input type="text" class="form-control" name="{{ $field_name }}" id="{{ $field_name }}" placeholder="{{ $label }}">
                @error($field_name)
                    <div>{{ $message }}</div>
                @enderror
            </div>
        @endif
        @if($field_name == 'emp_id')
         <div class = "row">
         <div class="col-md-6 mb-3"> <!-- Set the width for medium devices and above -->
        <label class="form-label" for="{{ $field_name }}">{{ $label }}</label>
        <select class="form-control" name="{{ $field_name }}" id="{{ $field_name }}">
            @foreach($employees as $employee)
                <option value="{{ $employee->id }}">{{ $employee->man_number }}</option>
            @endforeach
        </select>
    </div>
                                <!-- This is your read-only field -->
          <div class="col-md-6 mb-3"> <!-- Set the width for medium devices and above -->
        <label class="form-label" for="readonlyField">Employee Name</label>
        <input type="text" class="form-control" id="readonlyField" name="employee-name" readonly>
    </div>
</div>
        @endif
    @endforeach
                      </div>
                      <div class="form-group">
                      <label class="form-label" for="status">Status </label>
                
                <label><input type="radio" name="status" value="A" required> Active </label>
                <label><input type="radio" name="status" value="I" required> Inactive </label>
            </div>
                    </div>

                      
                      <button type="submit" class="btn btn-primary btn-color">Submit</button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
            </div>
            </div>
@endsection