@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
    @if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif
</div>


<div class="tab-content">
    <div class="tab-pane tabs-animation fade show active" id="tab-content-0" role="tabpanel">
        <div class="row">
            <div class="col-lg-8">
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <div id="smartwizard">
                            <div class="h5 modal-title text-center">
                                <h5 class="mt-2">
                                    <span>Payroll Information</span>
                                </h5>
                            </div>

                            <form method="post" action="{{ route('pam-payrolls.update', $data->id) }}">
                                <input type="hidden" name="code" value="{{ $data->code}}">
                                @csrf
                                @method('PUT')
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="code">Code<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" value="{{ old('code', $data->code) }}" id="code" placeholder="Code" disabled>
                                            @error('code')
                                            <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-8">
                                        <div class="form-group">
                                            <label for="short_description">Name<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" value="{{ old('short_description', $data->short_description) }}" name="short_description" id="short_description" placeholder="Name">
                                            @error('short_description')
                                            <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="long_description">Description</label>
                                    <textarea rows="3" class="form-control" name="long_description" id="long_description" placeholder="Description">{{ old('long_description', $data->long_description) }}</textarea>
                                    @error('long_description')
                                    <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group mb-3">
                                    <label for="working_days">Working Days<span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="working_days" name="working_days" value="{{ old('working_days', $data->working_days) }}" required>
                                    @error('working_days')
                                    <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="row">
                                <div class="mb-3 col-md-12">
                                    <div class="form-group">
                                        <label>Status<span class="text-danger">*</span></label>
                                        <div>
                                            <label><input type="radio" name="status" value="active" {{ $data->status == 'active' ? 'checked' : '' }}> Active</label>
                                            <label><input type="radio" name="status" value="inactive"  {{ $data->status == 'inactive' ? 'checked' : '' }}> Inactive</label>
                                        </div>
                                        @error('status')
                                        <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                         

                                <div class="divider"></div>
                                <div class="clearfix">
                                <button type="button" id="reset-btn" class="btn-shadow btn-wide  btn-pill btn-hover-shine btn btn-dark"onclick="window.location.href='{{ route('pam-payrolls.index') }}'">Close</button>
                                <button type="submit" id="next-btn" class="btn-shadow btn-wide  btn-pill btn-hover-shine btn btn-success">Submit</button>
                 
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="main-card mb-3 card">
                    <div class="card-body">
                        <h5 class="card-title">Instructions</h5>
                        <ul>
                            <li>Fill in the form to update payroll information.</li>
                            <li>All fields marked with a <span class="text-danger">*</span> are required.</li>
                            <li>Click the 'Save' button to save the changes.</li>
                            <li>Click the 'Close' button to cancel the operation.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<script type="text/javascript">
$(document).ready(function() {
    $('#tax_year').on('change', function() {
        var taxYearId = this.value;
        $('#pay_run_period').html('');
        $.ajax({
            url: '{{ route('getPamPayRunPeriods') }}?tax_year_id=' + taxYearId,
            type: 'get',
            success: function(res) {
                $('#pay_run_period').html('<option value="">Select Tax Period</option>');
                $.each(res, function(key, value) {
                    $('#pay_run_period').append('<option value="' + value.id + '">' + value.calendar_month + '-' + value.calendar_year + '</option>');
                });
            }
        });

        // Populate Tax Table dropdown
        $('#tax_table').html('');
        $.ajax({
            url: '{{ route('getPamTaxTables') }}?tax_year_id=' + taxYearId,
            type: 'get',
            success: function(res) {
                 $('#tax_table').val(res.current_tax_table_id);
              //  $('#tax_table').html('<option value="">Select Tax Table</option>');
                $.each(res, function(key, value) {
                    $('#tax_table').append('<option value="' + value.id + '">' + value.code + '</option>');
                });
                // Set existing value for Tax Table dropdown
               
            }
        });

        // Populate Social Security dropdown
        $('#social_security').html('');
        $.ajax({
            url: '{{ route('getPamSocialSecurities') }}?tax_year_id=' + taxYearId,
            type: 'get',
            success: function(res) {
                $('#social_security').val(res.current_social_security_id);
                //$('#social_security').html('<option value="">Select NAPSA Ceiling</option>');
                $.each(res, function(key, value) {
                    $('#social_security').append('<option value="' + value.id + '">' + value.code + '</option>');
                });
                // Set existing value for Social Security dropdown
               
            }
        });
    });
});



 
</script>