@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-dedu-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-dedu-defs.store') }}">
                    @csrf
                    @method('POST')
                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <label class="form-label" for="dedu_type_id">Type<span class="text-danger">*</span></label>
                            <select class="form-control select2" name="dedu_type_id" id="dedu_type_id" required>
                                @foreach($pamDeduTypes as $type)
                                @if ($type->code != 'INCTAX' && $type->code != 'SOCIALSECURITY') 
                                <option value="{{ $type->id }}" data-code="{{ $type->code }}">
                                    {{ $type->short_description }}
                                </option>
                                @endif
                                @endforeach
                            </select>
                            @error('dedu_type_id')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3 col-md-6">
                            <label class="form-label" for="dedu_group_id">Group<span class="text-danger">*</span></label>
                            <select class="form-control select2" name="dedu_group_id" id="dedu_group_id" required>
                                @foreach($pamDeduGroups as $group)
                                <option value="{{ $group->id }}">
                                    {{ $group->short_description }}
                                </option>
                                @endforeach
                            </select>
                            @error('dedu_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="cont_def_id">Contribution</label>
                            <select class="form-control select2" name="cont_def_id" id="cont_def_id">
                                <option value="">Select One</option> <!-- This is the null option -->
                                @foreach($pamContDef as $group)
                                <option value="{{ $group->id }}">
                                    {{ $group->short_description }}
                                </option>
                                @endforeach
                            </select>
                            @error('cont_def_id')
                            <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="" required>
                            @error('general_ledger_code')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                      
                    </div>
                    <div class="row">
                    <div class="mb-3 col-md-4">
                            <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-8">
                            <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 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="row">
                        
                    <div class="mb-3 col-md-12">
                        <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-12">
                      
                        <button type="button" class="btn btn-dark btn-color" onclick="window.location.href='{{ route('pam-dedu-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 Deduction. This refers to the category or type of the deduction, such as "Tax", "Pension Contribution", "Union Dues", etc.</li>
    <li>Enter the <strong>Group</strong> of the Deduction. Grouping deductions helps organize them for easier management and reporting. Examples of groups include "Statutory Deductions", "Voluntary Deductions", etc.</li>
    <li>Enter the <strong>Code</strong> of the Deduction. This is a unique identifier for the deduction, often used for internal tracking and referencing.</li>
    <li>Enter the <strong>General Ledger Code</strong> of the Deduction. This code corresponds to the general ledger account associated with the deduction for accounting purposes.</li>
    <li>Enter the <strong>Name</strong> of the Deduction. Provide a descriptive name for the deduction to easily identify it.</li>
    <li>Enter the <strong>Description</strong> of the Deduction. Optionally, provide additional details or information about the deduction.</li>
      <li>Choose the <strong>Method of Calculation</strong> of the Deduction. Specify how the deduction amount is calculated, such as fixed amount, percentage of salary, etc.</li>
    <li>Enter the <strong>Value</strong> of the Deduction. Input the actual amount or percentage value of the deduction.</li>
    <li>Choose the <strong>Status</strong> of the Deduction. Indicate whether the deduction is active, inactive, pending, etc.</li>
    <li>Click the <strong>Submit</strong> button to add the Deduction.</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() {
        // 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>


<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select2').select2();

    // Show/hide inputs based on selected option
    $('#dedu_type_id').change(function() {
        var selectedOption = $(this).find(':selected');
        var selectedCode = selectedOption.data('code');
        
        // Assuming 'LOAN' is the code for the option you want to check
        if (selectedCode === 'LOAN') {
            $('#nonLoanInputs').hide();
            $("input[name='mode_of_calculation'][value='fixed']").prop('checked', true);
            $("input[name='calculation_basis'][value='gross']").prop('checked', true);

        } else {
          
            $('#nonLoanInputs').show();

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