@extends('layouts.master')

@section('content')
<div class="app-page-title">
    <div class="page-title-wrapper">
        <div class="page-title-heading">

            <div>
                {{ $title }}
                <div class="page-title-subheading">
                    Change Tax Year for Payroll: {{ $data->short_description }}
                </div>
            </div>
        </div>

    </div>
</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 col-md-12">
                <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>{{ strtoupper($data->short_description .' Tax Year Information')}} </span>
                                </h5>
                            </div>


                            <form method="post" action="{{ route('pam-payrolls.store-tax-year') }}">
                            <input type="hidden" name="id" id="id" value=" {{$data->id}}">
                 

                                @csrf
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="code">Code</label>
                                            <input type="text" class="form-control" value="{{ old('code', $data->code) }}" name="code" id="code" placeholder="Code" disabled>
                                        </div>
                                    </div>

                                    <div class="col-md-8">
                                        <div class="form-group">
                                            <label for="short_description">Name</label>
                                            <input type="text" class="form-control" value="{{ old('short_description', $data->short_description) }}" name="short_description" id="short_description" placeholder="Name" disabled>
                                        </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" disabled>{{ old('long_description', $data->long_description) }}</textarea>
                                </div>
                                <div class="col-md-6">
                                    <div class="position-relative mb-3">
                                        <label for="tax_year">Tax Year</label>
                                        <select class="form-control select2" id="tax_year" name="current_tax_year_id" required>


                                            @foreach ($pamTaxYears as $item)
                                            <option value="{{ $item->id }}" {{ $item->id == $data->currentPamTaxTable->pamTaxYear->id ? ' selected' : '' }}>
                                                {{ $item->code }}
                                            </option>
                                            @endforeach

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

                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="position-relative mb-3">
                                        <label for="tax_table">Tax Table</label>
                                        <select class="form-control select2" id="tax_table" name="current_tax_table_id" required>
                                            <!-- Options will be populated via AJAX -->
                                        </select>
                                        @error('current_tax_table_id')
                                        <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="position-relative mb-3">
                                        <label for="social_security">NAPSA Ceiling</label>
                                        <select class="form-control select2" id="social_security" name="current_social_security_id" required>
                                            <!-- Options will be populated via AJAX -->
                                        </select>
                                        @error('current_social_security_id')
                                        <div class="text-danger">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>





                                <div class="divider"></div>
                                <div class="clearfix">
                                    <button type="button" href="index.blade.php" id="reset-btn" class="btn-shadow float-start btn btn-link">Close</button>
                                    <button type="submit" id="next-btn" class="btn-shadow btn-wide float-end btn-pill btn-hover-shine btn btn-primary">Save</button>

                                </div>
                            </form>
                        </div>



                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
@endsection
@section('scripts')
<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>');
                    });
                    // If you have another dropdown with id 'city', you can populate it here
                    // $('#city').html('<option value="">Select City</option>');
                }
            });
            $('#tax_table').html('');
            $.ajax({
                url: '{{ route('getPamTaxTables') }}?tax_year_id=' + taxYearId,
                type: 'get',
                success: function(res) {
                    $('#tax_table').html('<option value="">Select Tax Table</option>');
                    $.each(res, function(key, value) {
                        $('#tax_table').append('<option value="' + value.id + '">' + value.code + '</option>');
                    });
                    // If you have another dropdown with id 'city', you can populate it here
                    // $('#city').html('<option value="">Select City</option>');
                }
            });
            $('#social_security').html('');
            $.ajax({
                url: '{{ route('getPamSocialSecurities') }}?tax_year_id=' + taxYearId,
                type: 'get',
                success: function(res) {
                    $('#social_security').html('<option value="">Select NAPSA Ceiling</option>');
                    $.each(res, function(key, value) {
                        $('#social_security').append('<option value="' + value.id + '">' + value.code + '</option>');
                    });
                    // If you have another dropdown with id 'city', you can populate it here
                    // $('#city').html('<option value="">Select City</option>');
                }
            });
        });
    });
</script>

@endsection