@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 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">{{ strtoupper($pamContDef->short_description) }} CONTRIBUTION DEFINITION</div>
                <form method="post" action="{{ route('pam-cont-defs.update', $pamContDef->id) }}">
                    <input type="hidden" name="code" value="{{ $pamContDef->code }}">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="cont_type_id" id="cont_type_id" value="{{ $pamContDef->cont_type_id }}">

                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label" for="cont_type_id">Type<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="cont_type_id" id="cont_type_id" placeholder="Grop" value=" {{ $pamContDef->cont_type_id ? $pamContDef->pamContType->short_description : '' }}" required disabled>
                       
                       @error('cont_type_id')
                       <div class="text-danger">{{ $message }}</div>
                       @enderror
                  
                        </div>
                       
                        </div>

                    <div class="row">
                        <div class="mb-3 col-md-12">
                            <label class="form-label" for="cont_group_id">Group<span class="text-danger">*</span></label>
                                  <input type="text" class="form-control" name="cont_group_id" id="cont_group_id" placeholder="Grop" value=" {{ $pamContDef->cont_group_id ? $pamContDef->pamContGroup->short_description : '' }}" required disabled>
                       
                            @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="{{ $pamContDef->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="GL Code" value="{{ $pamContDef->general_ledger_code }}" required disabled>
                            @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="{{ $pamContDef->short_description }}" required disabled>
                            @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</label>
                            <textarea rows="2" cols="1" class="form-control" name="long_description" id="long_description" placeholder="Description" disabled>{{ $pamContDef->long_description }}</textarea>
                            @error('long_description')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">

                        <div class="mb-3 col-md-12">
                            <div class="form-group">
                                <label for="employer_maximum_ceiling">Employer Maximum Ceiling Amount</label>
                                <input value="{{$pamContDef->employer_maximum_ceiling}}" type="number" step="0.01" class="form-control" id="employer_maximum_ceiling" name="employer_maximum_ceiling" required disabled>
                                @error('employer_maximum_ceiling')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <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" id="fixedRadio" required  {{ $pamContDef->mode_of_calculation == 'fixed' ? 'checked' : '' }}> Fixed Amount</label>
                                <label><input type="radio" name="mode_of_calculation" value="percentage" data-type="default" id="percentageRadio" required {{ $pamContDef->mode_of_calculation == 'percentage' ? 'checked' : '' }}> Percentage</label>

                                @if($pamContDef->mode_of_calculation === 'fixed')
                                <label><input step="0.01" type="number" class="form-control" name="figure_input" id="figure_input" placeholder="Value" value="{{$pamContDef->fixed_amount}}" required disabled></label>
                                @else
                                <label><input step="0.01" type="number" class="form-control" name="figure_input" id="figure_input" placeholder="Value" value="{{$pamContDef->percentage}}" required disabled></label>
                                @endif

                                @error('figure_input')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="mb-3 col-md-12" id="calculationBasisSection" style="{{ $pamContDef->mode_of_calculation !== 'fixed' ? 'display: block;' : 'display: none;' }}">
                        <div class="row">
                            <div class="mb-3 col-md-12">
                                <div class="form-group">
                                    <label class="form-label" for="calculation_basis">Based on<span class="text-danger">*</span></label>
                                    <label><input disabled type="radio" name="calculation_basis" value="basic" {{ $pamContDef->calculation_basis == 'basic' ? 'checked' : '' }}> Basic Pay</label>
                                    <label><input disabled type="radio" name="calculation_basis" value="gross" {{ $pamContDef->calculation_basis == 'gross' ? 'checked' : '' }}> Gross Pay</label>
                                </div>
                            </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" disabled name="status" value="active" {{ $pamContDef->status == 'active' ? ' checked' : '' }} required> Active</label>
                            <label><input type="radio" disabled name="status" value="inactive" {{ $pamContDef->status == 'inactive' ? ' checked' : '' }} required> Inactive</label>
                        </div>
                    </div>
                    <div class="mb-3 col-md-6">
                        <div class="form-group">
                            <button type="button" class="btn btn-success btn-color" onclick="window.location.href='{{ route('pam-cont-defs.index') }}'">Close</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><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><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><strong>Name</strong> of the Contribution. Provide a descriptive name for the contribution to easily identify it.</li>
        <li><strong>Description</strong> of the Contribution. Optionally, provide additional details or information about the contribution.</li>
        <li><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><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><strong>Value</strong> of the Contribution. Input the actual amount or percentage value of the contribution.</li>
        <li><strong>Status</strong> of the Contribution. Indicate whether the contribution is active, inactive, pending, etc.</li>
    
        <li><strong>Close</strong> button. Close the window and return to the previous screen.</li>
    </ul>
            </div>
        </div>
    </div>
</div>
           
@endsection

@section('scripts')

<script>
    // JavaScript to show/hide calculationBasisSection based on mode_of_calculation
    const fixedRadio = document.getElementById('fixedRadio');
    const calculationBasisSection = document.getElementById('calculationBasisSection');

    fixedRadio.addEventListener('change', function() {
        if (this.checked) {
            calculationBasisSection.style.display = 'none';
        }
    });

    const percentageRadio = document.getElementById('percentageRadio');
    percentageRadio.addEventListener('change', function() {
        if (this.checked) {
            calculationBasisSection.style.display = 'block';
        }
    });
</script>

@endsection