@extends('layouts.master')

@section('content')

<div class="app-page-title">
    <div class="page-title-wrapper">
        <div class="page-title-heading">
            <div class="page-title-icon">
                <i class="pe-7s-medal icon-gradient bg-tempting-azure"></i>
            </div>
            <div>
                {{ $pageTitle }}
                <div class="page-title-subheading">View for submitting a claim.</div>
            </div>
        </div>
    </div>

    @if(isset($error) || session('error'))
    <div class="alert alert-danger">
        {{ $error ?? session('error') }}
    </div>
    @endif
</div>



<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">
              
                  <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 != 'start_date' && $field_name != 'end_date' && $field_name != 'supervisor_id' && $field_name != 'actions' && $field_name != 'earn_def_id' && $field_name != 'units' && $field_name != 'units' && $field_name != 'id')
                <div class="col 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

                    <div class="row">
                            @if($field_name == 'start_date')
                                <div class="mb-6 col-md-3"> <!-- or use col-2, col-3 for better visibility -->
        
                                <label for="start_date">Start Date</label>
                                <input type="date" class="form-control" id="start_date" name="start_date" required>
        
                    </div>
                            @endif

    @if($field_name == 'end_date')
    <div class="mb-6 col-md-3"> <!-- or use col-2, col-3 for better visibility -->
        
            <label for="end_date">End Date</label>
            <input type="date" class="form-control" id="end_date" name="end_date" required>
        
</div>

    @endif
</div>
        @if($field_name == 'units')
         <div class="mb-6 col-md-3">
        <label class="form-label" for="{{ $field_name }}">{{ $label }}</label>
         <select class="form-control" name="{{ $field_name }}" id="{{ $field_name }}">
                                    
                                            <option value="hours">Hours</option>
                                            <option value="days">Days</option>
                                            <option value="kilometers">Kilometers</option>
                                            <option value="night">Nights</option>
                                    
        </select>
                                </div>
        @endif


        @if($field_name == 'earn_def_id')
         <div class class="mb-6 col-md-3">
            <label class="form-label" for="{{ $field_name }}">{{ $label }}</label>
         <select class="form-control" name="{{ $field_name }}" id="{{ $field_name }}">
                                    @foreach($earnDefs as $earnDef)
                                        @if($earnDef->pamEarnType->code !== 'BASIC')
                                            <option value="{{ $earnDef->id }}">{{ $earnDef->short_description }}</option>
                                        @endif
                                    @endforeach
        </select>
                                </div>
        @endif


        @if($field_name == 'id')
         <div class class="mb-6 col-md-3">
            <label class="form-label" for="{{ $field_name }}">{{ $label }}</label>
         <select class="form-control" name="{{ $field_name }}" id="{{ $field_name }}">
                                    @foreach($emps as $emp)
                                        
                                            <option value="{{ $emp->id }}">{{ $emp->pamHrUser->first_name . ' ' . $emp->pamHrUser->last_name . ' ' . $emp->pamHRUser->man_number }}</option>
                                       
                                    @endforeach
        </select>
                                </div>
        @endif





        @if($field_name == 'primary_supervisor')
         <div class="mb-6 col-md-3">
            <label class="form-label" for="{{ $field_name }}">{{ $label }}</label>
         <select class="form-control" name="{{ $field_name }}" id="{{ $field_name }}">
    
                                    @foreach($supervisors as $supervisor)
                                    
                                        <option value="{{ $supervisor->id }}">{{ $supervisor->pamHRuser->first_name . " " . $supervisor->pamHRUser->last_name}}</option>
                                    
                                    @endforeach
                                </select>
                                </div>
        @endif
    @endforeach
                      </div>
                      
                    </div>

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

@section('scripts')


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Javasscript function to automatically populate the claim_amount field in theis
 form based on the rate and quantity fields -->
 <script>
    $(document).ready(function() {
        $('#rate').on('input', function() {
            var rate = $('#rate').val();
            var quantity = $('#quantity').val();
            var claim_amount = rate * quantity;
            $('#claim_amount').val(claim_amount);
        });

        $('#quantity').on('input', function() {
            var rate = $('#rate').val();
            var quantity = $('#quantity').val();
            var claim_amount = rate * quantity;
            $('#claim_amount').val(claim_amount);
        });
    });

    </script>

@endsection