@extends('layouts.master')

@section('content')
<div class="app-page-title">
    <div class="page-title-wrapper">
        <div class="page-title-heading">
            
            <div>
                {{ $title }}
               
            </div>
        </div>
    </div>

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

<div class="main-card mb-3 card">
    <div class="card-body">
        <a href="{{ route('pam-earn-defs.index') }}"> <i class="fa fa-arrow-left"></i></a>
        <div class="row">
            <div class="mb-3 col-md-6">
                <div class="card-title text-center">{{ strtoupper($pamEarnDef->short_description)}} EARNING DEFINITION
                </div>
                <form method="post" action="{{ route('pam-earn-defs.update', $pamEarnDef->id) }}">
                <input type="hidden" name="code" value="{{ $pamEarnDef->code}}">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="earn_type_id" id="earn_type_id" value="{{ $pamEarnDef->earn_type_id }}">
            
                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <label class="form-label" for="earn_type_id">Type<span class="text-danger">*</span></label>
                          
                            <select class="form-control" disabled>
                               
                                <option value="{{$pamEarnDef->earn_type_id }}" >
                                    {{ $pamEarnDef->pamEarnType->short_description }}
                                </option>
                              
                            </select>
                            @error('earn_type_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3 col-md-6">
                            <label class="form-label" for="earn_group_id">Group<span
                                    class="text-danger">*</span></label>
                                    <select class="form-control select2" name="earn_group_id" id="earn_group_id" required>
                                @foreach($pamEarnGroups as $group)
                                <option value="{{ $group->id }}" {{ $group->id == $pamEarnDef->earn_group_id ? ' selected' : '' }}>
                                    {{ $group->short_description }}
                                </option>
                                @endforeach
                            </select>
                            @error('earn_group_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <label class="form-label" for="code">Code<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="code" id="code" placeholder="Code"
                                value="{{ $pamEarnDef->code }}" disabled>
                            @error('code')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3 col-md-6">
                            <label class="form-label" for="general_ledger_code">General Ledger Code<span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="general_ledger_code" id="general_ledger_code"
                                placeholder="Name" value="{{ $pamEarnDef->general_ledger_code }}" required>
                            @error('general_ledger_code')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label" for="short_description">Name<span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="short_description" id="short_description"
                                placeholder="Name" value="{{ $pamEarnDef->short_description }}" required>
                            @error('short_description')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>


                    </div>

                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label" for="long_description">Description<span
                                    class="text-danger">*</span></label>
                            <textarea rows="2" cols="1" class="form-control" name="long_description"
                                id="long_description" placeholder="Description"
                                required>{{ $pamEarnDef->long_description }}</textarea>
                            @error('long_description')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    @if($pamEarnDef->pamEarnType->code == 'OVERTIME')
                    <div id="overtimeInputs">
                        <div class="row">
                            <div class="mb-3 col-md-6">
                                <div class="form-group">

                                    <label class="form-label" for="rate_figure_input">Rate<span
                                            class="text-danger">*</span></label>
                                    <input step="0.01" type="number" class="form-control" name="rate_figure_input"
                                        value="{{ $pamEarnDef->overtime_rate }}" id="rate_figure_input"
                                        placeholder="Value" required>
                                    @error('rate_figure_input')
                                    <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>

                            </div>
                        </div>
                        <input type="hidden" name="mode_of_calculation" id="mode_of_calculation" value="{{ $pamEarnDef->mode_of_calculation }}">
                        <input type="hidden" name="figure_input" id="figure_input" value=0>
            
                    </div>
                    @else
                    <div id="notovertimeInputs">
    @if($pamEarnDef->pamEarnType->code != 'BASIC')
    <div class="row">
        <div class="mb-3 col-md-12">
            <div class="form-group">
                <label class="form-label" for="mode_of_calculation">Method of Calculation<span class="text-danger">*</span></label>
                <label><input type="radio" name="mode_of_calculation" value="fixed" {{ $pamEarnDef->mode_of_calculation === 'fixed' ? 'checked' : '' }} required> Fixed Amount</label>
                <label><input type="radio" name="mode_of_calculation" value="percentage" data-type="default" {{ $pamEarnDef->mode_of_calculation == 'percentage' ? 'checked' : '' }} required> Percentage</label>
                @if($pamEarnDef->mode_of_calculation === 'percentage')
                <label> <input step="0.01" type="number" class="form-control" name="figure_input" value="{{$pamEarnDef->percentage}}" id="figure_input" placeholder="Value" required></label>
                @else
                <label> <input step="0.01" type="number" class="form-control" name="figure_input" value="{{$pamEarnDef->fixed_amount}}" id="figure_input" placeholder="Value" required></label>
                @endif
                @error('figure_input')
                <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>
    <div class="row">
        <div class="mb-3 col-md-12">
            <label class="form-check-label" for="can_prorata">Can Prorata</label>
            <input class="form-check-input" type="checkbox" name="can_prorata" id="can_prorata" {{ $pamEarnDef->can_prorata == 1 ? 'checked' : '' }}>
            @error('can_prorata')
            <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>
    </div>
    @endif
    <input type="hidden" name="rate_figure_input" id="rate_figure_input" value="0">
</div>


                    @endif



                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <div class="form-group">
                                <label class="form-label" for="status">Status<span class="text-danger">*</span></label>
                                <label><input type="radio" name="status" value="active"
                                        {{ $pamEarnDef->status == 'active' ? ' checked' : '' }} required> Active</label>
                                <label><input type="radio" name="status" value="inactive"
                                        {{ $pamEarnDef->status == 'inactive' ? ' checked' : '' }} required>
                                    Inactive</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-md-6">
                            
                            <button type="button" class="btn btn-dark btn-color"
                                onclick="window.location.href='{{ route('pam-earn-defs.index') }}'">Close</button>
                                <button type="submit" class="btn btn-success btn-color">Submit</button>

                        </div>
                    </div>
                </form>
            </div>
            <div class="mb-3 col-md-6">
                <div class="card-title text-center">INSTRUCTIONS</div>
                <ul>
    <li>Fields marked with <span class="text-danger">*</span> are required.</li>
    <li>Change the <strong>Group</strong> of the Earning. Grouping earnings helps organize them for easier management and reporting. Examples of groups include "Taxable", Non Taxable, etc.</li>
      <li>Change the <strong>General Ledger Code</strong> of the Earning. This code corresponds to the general ledger account associated with the earning for accounting purposes.</li>
    <li>Change the <strong>Name</strong> of the Earning. Provide a descriptive name for the earning.</li>
    <li>Change the <strong>Description</strong> of the Earning. Optionally, provide additional details or information about the earning.</li>
    <li>Choose the <strong>Method of Calculation</strong> of the Earning. Specify how the earning amount is calculated, such as fixed amount or percentage of basic pay.</li>
    <li>Change the <strong>Value</strong> of the Earning. Input the actual amount or rate of the earning.</li>
    <li>Choose the <strong>Status</strong> of the Earning. Indicate whether the earning is active or inactive.</li>
    <li>Tick the <strong>Prorate</strong> box if the earning should be prorated based on worked days.</li>
    <li>Click the <strong>Submit</strong> button to add the Earning.</li>
    <li>Click the <strong>Close</strong> button to remove all data and return to the previous screen.</li>
</ul>

            </div>
        </div>
    </div>
</div>
@endsection



@section('scripts')

<script>
document.addEventListener("DOMContentLoaded", function() {
    const selectAllRecurrence = document.getElementById("selectAllRecurrence");
    const recurrenceCheckboxes = document.querySelectorAll("[name^='recurrence_period_']");

    selectAllRecurrence.addEventListener("change", function() {
        recurrenceCheckboxes.forEach(function(checkbox) {
            checkbox.checked = selectAllRecurrence.checked;
        });
    });

    recurrenceCheckboxes.forEach(function(checkbox) {
        checkbox.addEventListener("change", function() {
            selectAllRecurrence.checked = [...recurrenceCheckboxes].every((c) => c.checked);
        });
    });
});
</script>

@endsection