@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 ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

</div>

<div class="main-card mb-3 card">
    <div class="card-body">
        <a href="{{ route('pam-cont-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-cont-defs.store') }}">
                    @csrf
                    @method('POST')
                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <label class="form-label" for="cont_type_id">Type<span class="text-danger">*</span></label>
                            <select class="form-control select2" name="cont_type_id" id="cont_type_id" required>
                                @foreach($pamContTypes as $type)
                                <option value="{{ $type->id }}">
                                    {{ $type->short_description }}
                                </option>
                                @endforeach
                            </select>
                            @error('cont_type_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3 col-md-6">
                            <label class="form-label" for="cont_group_id">Group<span class="text-danger">*</span></label>
                            <select class="form-control select2" name="cont_group_id" id="cont_group_id" required>
                                @foreach($pamContGroups as $group)
                                <option value="{{$group->id }}">
                                    {{ $group->short_description }}
                                </option>
                                @endforeach
                            </select>
                            @error('cont_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="{{ old('code') }}" 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="{{ old('general_ledger_code') }}">
                        </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="{{ old('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>{{ old('long_description') }}</textarea>
                            @error('long_description')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                 
                    <div class="row">
                      
                        <div class="mb-3 col-md-6">
                            <div class="form-group">
                                <label for="employer_maximum_ceiling">Employer Maximum Ceiling Amount</label>
                                <input type="number" min="0" step="0.01" class="form-control" id="employer_maximum_ceiling" name="employer_maximum_ceiling" value="{{ old('employer_maximum_ceiling', 0) }}" required>
                                @error('employer_maximum_ceiling')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
   
                    <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" id="fixedRadio" required checked> Fixed Amount</label>
                                <label><input type="radio" name="mode_of_calculation" value="percentage" id="percentageRadio" required> Percentage</label>
                                <label><input step="0.01" type="number" class="form-control" name="figure_input" id="figure_input" placeholder="Value" value =0 required></label>
                                @error('figure_input')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                      
                    <div class="mb-3 col-md-12" id="calculationBasisSection">
                        <div class="form-group">
                            <label class="form-label" for="calculation_basis">Based on<span class="text-danger">*</span></label>
                            <label><input type="radio" name="calculation_basis" value="basic"> Basic Pay</label>
                            <label><input type="radio" name="calculation_basis" value="gross" checked> Gross Pay</label>
                        </div>
                    </div>
                    
                    </div>
                    <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 class="mb-3 col-md-6">

                       
                        <button type="button" class="btn btn-dark btn-color" onclick="window.location.href='{{ route('pam-cont-defs.index') }}'">Close</button>
                        <button type="submit" class="btn btn-success btn-color">Save</button>

                    </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 Contribution. This refers to the category or type of the contribution, such as "Pension", "Healthcare", etc.</li>
        <li>Enter the <strong>Group</strong> of the Contribution. Grouping contributions helps organize them for easier management and reporting. Examples of groups include "Statutory", "Other", etc.</li>
        <li>Enter the <strong>Code</strong> of the Contribution. This is a unique identifier for the contribution, often used for internal tracking and referencing.</li>
        <li>Enter the <strong>General Ledger Code</strong> of the Contribution. This code corresponds to the general ledger account associated with the contribution for accounting purposes.</li>
        <li>Enter the <strong>Name</strong> of the Contribution. Provide a descriptive name for the contribution to easily identify it.</li>
        <li>Enter the <strong>Description</strong> of the Contribution. Optionally, provide additional details or information about the contribution.</li>
        <li>Enter the <strong>Employer Maximum Ceiling Amount</strong> of the Contribution. The employer maximum ceiling is the maximum contribution amount that the employer can contribute. Use "0" to indicate no maximum has been set.</li>
        <li>Choose the <strong>Method of Calculation</strong> of the Contribution. Specify how the contribution amount is calculated, such as fixed amount, percentage of salary, etc.</li>
        <li>Enter the <strong>Value</strong> of the Contribution. Input the actual amount or percentage value of the contribution.</li>
        <li>Choose the <strong>Status</strong> of the Contribution. Indicate whether the contribution is active, inactive, pending, etc.</li>
        <li>Click the <strong>Submit</strong> button to add the Contribution. Save your changes after entering all necessary information.</li>
        <li>Click the <strong>Close</strong> button to remove all data and return to the previous screen. Use this option if you want to discard any changes made.</li>
    </ul>
</div>

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

@section('scripts')
<script>
    $(document).ready(function() {
        // Initially hide the calculation_basis radio buttons
        $('#calculationBasisSection').hide();

        // Show/hide calculation_basis based on mode_of_calculation
        $('input[name="mode_of_calculation"]').change(function() {
            if ($(this).val() === 'fixed') {
                $('#calculationBasisSection').hide();
            } else {
                $('#calculationBasisSection').show();
            }
        });
    });
</script>
@endsection