@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">{{ $title }}</div>
                <form method="post" action="{{ route('pam-earn-defs.store') }}">
                    @csrf
                    @method('POST')
                    <div class="row">
                        <div class="mb-6 col-md-6">
                            <label class="form-label" for="earn_type_id">Type<span class="text-danger">*</span></label>
                            <select class="form-control select2" name="earn_type_id" id="earn_type_id" required>

                                <option value="">Select One</option>

                                @foreach($pamEarnTypes as $item)
                                @if($item->code != 'BASIC')
                                <option value="{{ $item->id }}" data-code="{{ $item->code }}">
                                    {{ $item->short_description }}
                                </option>
                                @endif
                                @endforeach
                            </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->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=""
                                required>
                            @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="GL Code" value="" 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="" 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></textarea>
                            @error('long_description')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                
                    <div id="overtimeInputs" style="display: none;">
                        <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"
                                        id="rate_figure_input" placeholder="Value" required>
                                    @error('rate_figure_input')
                                    <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>

                            </div>
                        </div>

                    </div>
                    <div id="notovertimeInputs" style="display: none;">
                        <div class="row">
                            <div class="mb-3 col-md-9">
                                <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" required> Fixed
                                        Amount</label>

                                    <label><input type="radio" name="mode_of_calculation" value="percentage"
                                            data-type="default" required> Percentage</label>
                                    <label> <input step="0.01" type="number" class="form-control" name="figure_input"
                                            id="figure_input" placeholder="Value" required></label>
                                    @error('figure_input')
                                    <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>

                            </div>


                            <div class="mb-3 col-md-3">
                                <div class="form-check">
                                    <label class="form-check-label" for="can_prorata">
                                        Allow Prorate
                                    </label>
                                    <input class="form-check-input" type="checkbox" name ="can_prorata" id="can_prorata">
                                </div>
                            </div>
                        </div>
                    </div>
                    <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" required> Active</label>
                                <label><input type="radio" name="status" value="inactive" 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>Enter the <strong>Type</strong> of the Earning. This refers to the category or type of the earning, such as "Overtime Pay", "Leave Commutation", etc.</li>
    <li>Enter 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>Enter the <strong>Code</strong> of the Earning. This is a unique identifier for the earning, often used for internal tracking and referencing.</li>
    <li>Enter 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>Enter the <strong>Name</strong> of the Earning. Provide a descriptive name for the earning.</li>
    <li>Enter 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>Enter 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 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).ready(function() {
    // Initialize Select2
    $('.select2').select2();

    // Show/hide inputs based on selected option
    $('#earn_type_id').change(function() {
        var selectedOption = $(this).find(':selected');
        var selectedCode = selectedOption.data('code');

        // Assuming 'overtime' is the code for the option you want to check
        if (selectedCode === 'OVERTIME') {
            $('#notovertimeInputs').hide();
            $('#overtimeInputs').show();
            // Set mode_of_calculation to 'fixed'
            $("input[name='mode_of_calculation'][value='fixed']").prop('checked', true);
            $('#figure_input').val('0');
        } else {
            $('#overtimeInputs').hide();
            $('#notovertimeInputs').show();
            $('#rate_figure_input').val('0');

        }
    });
});
</script>
@endsection