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

            <div>
                {{ $pageTitle }}
                
            </div>

        </div>
        @if(auth()->user()->roles->first()->permissions->contains('name', 'Manage tax tables'))

        <div class="page-title-actions">

            <div class="d-inline-block dropdown">
                <a data-bs-toggle="modal" data-bs-target="#createModal" class="btn-shadow btn btn-success">
                <i class="fa fa-plus "></i>

                    <span>Add a NAPSA rate</span>
                </a>

            </div>
        </div>
        @endif

    </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="main-card mb-3 card">
    <div class="card-body">
        <table style="width: 100%;" id="example1" class="display nowrap table table-hover table-striped table-bordered">


            <thead>
                <tr>

                    <th>Year</th>
                    <th>Code</th>

                    <th>Employee %</th>
                    <th>Employer %</th>
                    <th>Employee Ceiling</th>
                    <th>Employer Ceiling</th>
                    <th>Status</th>

                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($data as $item)
                <tr>
                    <td>{{ $item->pamTaxYear->code }}</td>
                    <td>{{ $item->code }}</td>

                    <td style="text-align: right;">{{ $item->employee_contribution_rate}}</td>
                    <td style="text-align: right;">{{ $item->employer_contribution_rate }}</td>
                    <td style="text-align: right;">{{ $item->employee_maximum_ceiling }}</td>
                    <td style="text-align: right;">{{ $item->employer_maximum_ceiling }}</td>
                    <td style="text-align: right;">{{ $item->status }}</td>


                    <td style="text-align: right; width:20%">
                        @if(auth()->user()->roles->first()->permissions->contains('name', 'View tax tables')|| auth()->user()->roles->first()->permissions->contains('name', 'Manage tax tables'))

                        <a data-bs-toggle="modal" data-bs-target="#showModal-{{$item->id}}" class="btn cur-p btn-primary btn-color"><i class="fa fa-eye"></i>
                        </a>
                        @endif
                        @if(auth()->user()->roles->first()->permissions->contains('name', 'Manage tax tables'))
                        <a data-bs-toggle="modal" data-bs-target="#editModal-{{$item->id}}" class="btn cur-p btn-success btn-color"><i class="fa fa-edit"></i>
                        </a>

                        <a data-bs-toggle="modal" data-bs-target="#deleteModal-{{$item->id}}" class="btn cur-p btn-danger btn-color"><i class="fa fa-trash"></i>
                        </a>

                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
</div>
</div>
</div>

@endsection

@section('modal')
@foreach ($data as $key => $item)
<div class="modal fade" id="deleteModal-{{$item->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Delete {{$item->code}} NAPSA rate definition confirmation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <p class="mb-0">
                    Are you sure you want to delete {{$item->code}} NAPSA rate definition?
                </p>
            </div>
            <div class="modal-footer">

                <a data-bs-dismiss="modal" class="btn-shadow btn-wide float-end btn-pill btn-hover-shine btn btn-dark">No</a>

                <a href="{{ route('pam-social-securities.destroy', $item->id) }}" class="btn-shadow float-end btn-wide btn-pill me-3 btn btn-outline-success">Yes</a>

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

<div class="modal fade" id="editModal-{{$item->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog  modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit {{ $item->code }} NAPSA Rate</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Instructions for the user -->
                <p>Please follow these steps to edit the NAPSA rate:</p>
                <ol>
                    <li>Review the existing data.</li>
                    <li>Update the required fields:</li>
                    <ul>
                        <li>Financial Year: Select the applicable financial year from the dropdown menu.</li>
                        <li>Employee Age Limit: Specify the new age limit for employees.</li>
                        <li>Minimum Monthly Gross Income: Enter the updated minimum monthly gross income.</li>
                        <li>Employee Contribution Rate: Input the new employee contribution rate.</li>
                        <li>Employer Contribution Rate: Enter the new employer contribution rate.</li>
                        <li>Employee Maximum Ceiling Amount: Specify the updated maximum ceiling amount for employees.</li>
                        <li>Employer Maximum Ceiling Amount: Specify the updated maximum ceiling amount for employers.</li>
                        <li>Status: Select whether the NAPSA rate should be active or inactive.</li>
                    </ul>
                    <li>Click the "Update" button after making the necessary changes.</li>
                    <li>If there are any errors or missing information, they will be displayed on the form for correction.</li>
                    <li>Upon successful update, the changes will be saved, and a success message will be shown.</li>
                </ol>
                <!-- End of instructions -->
                <form method="post" action="{{ route($routeBase.'.update', ['id' => $item->id]) }}">
                    <input type="hidden" name="code" value="{{ $item->code}}">
                    <input type="hidden" name="tax_year_id" value="{{ $item->tax_year_id}}">
                    @csrf
                    @method('PUT') {{-- Use PUT method for updating --}}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="tax_year_id">Financial Year:</label>
                                <select class="form-control" id="tax_year_id" name="tax_year_id" required disabled>
                                    @php $pamTaxYears = \App\Models\PamTaxYear::all(); @endphp
                                    <!-- Populate this dropdown with available tax years -->
                                    @foreach ($pamTaxYears as $year)
                                    <option value="{{ $year->id }}" {{ $item->tax_year_id == $year->id ? 'selected' : '' }}>
                                        {{ $year->code }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="code">Code:</label>
                                <input type="text" class="form-control" id="code" name="code" value="{{ $item->code }}" disabled>
                                @error('code')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="employee_age_limit">Employee Age Limit:</label>
                                <input type="number" step="1" class="form-control" value="{{ $item->employee_age_limit }}" id="employee_age_limit" name="employee_age_limit" required>
                                @error('employee_age_limit')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="minimum_monthly_gross_income">Minimum Monthly Gross Income:</label>
                                <input type="number" step="0.01" class="form-control" id="minimum_monthly_gross_income" name="minimum_monthly_gross_income" required value="{{ $item->minimum_monthly_gross_income }}">
                                @error('minimum_monthly_gross_income')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="employee_contribution_rate">Employee Contribution Rate:</label>
                                <input type="number" step="0.01" class="form-control" id="employee_contribution_rate" name="employee_contribution_rate" required value="{{ $item->employee_contribution_rate }}">
                                @error('employee_contribution_rate')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="employer_contribution_rate">Employer Contribution Rate:</label>
                                <input type="number" step="0.01" class="form-control" id="employer_contribution_rate" name="employer_contribution_rate" required value="{{ $item->employer_contribution_rate }}">
                                @error('employer_contribution_rate')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="employee_maximum_ceiling">Employee Maximum Ceiling Amount:</label>
                                <input type="number" step="0.01" class="form-control" id="employee_maximum_ceiling" name="employee_maximum_ceiling" required value="{{ $item->employee_maximum_ceiling }}">
                                @error('employee_maximum_ceiling')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="employer_maximum_ceiling">Employer Maximum Ceiling Amount:</label>
                                <input type="number" step="0.01" class="form-control" id="employer_maximum_ceiling" name="employer_maximum_ceiling" required value="{{ $item->employer_maximum_ceiling }}">
                                @error('employer_maximum_ceiling')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label" for="status">Status:</label>
                        <label><input type="radio" name="status" value="active" {{ $item->status == 'active' ? 'checked' : '' }} required>
                            Active</label>
                        <label><input type="radio" name="status" value="inactive" {{ $item->status == 'inactive' ? 'checked' : '' }} required>
                            Inactive</label>
                        @error('status')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <button type="button" class="btn btn-dark" data-bs-dismiss="modal" aria-label="Close"> Close</button>
                    <button type="submit" class="btn btn-success">Submit</button>
                    <div class="mT-30">
                        @if(isset($error) || session('error'))
                        <div class="alert alert-danger">
                            {{ $error ?? session('error') }}
                        </div>
                        @endif
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="showModal-{{$item->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog  modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">{{$item->code}} NAPSA Rate Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="tax_year_id">Financial Year:</label>
                                <select class="form-control" id="tax_year_id" name="tax_year_id" required disabled>
                                    @php
                                    $pamTaxYears = \App\Models\PamTaxYear::all();
                                    @endphp

                                    <!-- Populate this dropdown with available tax years -->
                                    @foreach ($pamTaxYears as $year)
                                    <option value="{{ $year->id }}" {{ $item->tax_year_id == $year->id ? 'selected' : '' }}>
                                        {{ $year->code }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="code">Code</label>
                                <input type="text" class="form-control" id="code" name="code" required value="{{ $item->code }}" disabled>
                                @error('code')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <!-- Disable other input fields similarly -->
                    <!-- Employee Age Limit -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="employee_age_limit">Employee Age Limit:</label>
                                <input type="number" step="0" class="form-control" id="employee_age_limit" name="employee_age_limit" required value="{{ $item->employee_age_limit }}" disabled>
                                @error('employee_age_limit')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!-- Minimum Monthly Gross Income -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="minimum_monthly_gross_income">Minimum Monthly Gross Income:</label>
                                <input type="number" step="0.01" class="form-control" id="minimum_monthly_gross_income" name="minimum_monthly_gross_income" required value="{{ $item->minimum_monthly_gross_income }}" disabled>
                                @error('minimum_monthly_gross_income')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <!-- Employee Contribution Rate -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="employee_contribution_rate">Employee Contribution Rate:</label>
                                <input type="number" step="0.01" class="form-control" id="employee_contribution_rate" name="employee_contribution_rate" required value="{{ $item->employee_contribution_rate }}" disabled>
                                @error('employee_contribution_rate')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!-- Employer Contribution Rate -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="employer_contribution_rate">Employer Contribution Rate:</label>
                                <input type="number" step="0.01" class="form-control" id="employer_contribution_rate" name="employer_contribution_rate" required value="{{ $item->employer_contribution_rate }}" disabled>
                                @error('employer_contribution_rate')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <!-- Employee Maximum Ceiling Amount -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="employee_maximum_ceiling">Employee Maximum Ceiling Amount:</label>
                                <input type="number" step="0.01" class="form-control" id="employee_maximum_ceiling" name="employee_maximum_ceiling" required value="{{ $item->employee_maximum_ceiling }}" disabled>
                                @error('employee_maximum_ceiling')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!-- Employer Maximum Ceiling Amount -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="employer_maximum_ceiling">Employer Maximum Ceiling Amount:</label>
                                <input type="number" step="0.01" class="form-control" id="employer_maximum_ceiling" name="employer_maximum_ceiling" required value="{{ $item->employer_maximum_ceiling }}" disabled>
                                @error('employer_maximum_ceiling')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <!-- Status (radio buttons) -->
                        <div class="form-group mb-3">
                            <label class="form-label" for="status">Status</label>
                            <label><input type="radio" name="status" value="active" {{ $item->status == 'active' ? 'checked' : '' }} required disabled>
                                Active</label>
                            <label><input type="radio" name="status" value="inactive" {{ $item->status == 'inactive' ? 'checked' : '' }} required disabled>
                                Inactive</label>
                            @error('status')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <button type="button" class="btn btn-dark" data-bs-dismiss="modal" aria-label="Close"> Close</button>
                </form>
            </div>
        </div>
    </div>
</div>

@endforeach



<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add a NAPSA Rate</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <!-- Instructions for the user -->
                <p>Please follow these steps to add a new NAPSA rate:</p>
                <ol>
                   
                    <li>Fill in the required fields:</li>
                    <ul>
                        <li>Financial Year <span style="color: red;">*</span>: Select the applicable financial year from the dropdown menu.</li>
                        <li>Code <span style="color: red;">*</span>: Enter the code for the NAPSA rate.</li>
                        <li>Employee Age Limit <span style="color: red;">*</span>: Specify the age limit for employees.</li>
                        <li>Minimum Monthly Gross Income <span style="color: red;">*</span>: Enter the minimum monthly gross income.</li>
                        <li>Employee Contribution Rate <span style="color: red;">*</span>: Input the employee contribution rate.</li>
                        <li>Employer Contribution Rate <span style="color: red;">*</span>: Enter the employer contribution rate.</li>
                        <li>Employee Maximum Ceiling Amount <span style="color: red;">*</span>: Specify the maximum ceiling amount for employees.</li>
                        <li>Employer Maximum Ceiling Amount <span style="color: red;">*</span>: Specify the maximum ceiling amount for employers.</li>
                        <li>Status <span style="color: red;">*</span>: Select whether the NAPSA rate is active or inactive.</li>
                    </ul>
                    <li>Once all the required fields are filled, click the "Submit" button.</li>
                    <li>If there are any errors or missing information, they will be displayed on the form for correction.</li>
                    <li>Upon successful submission, the NAPSA rate will be added, and a success message will be shown.</li>
                </ol>
                <!-- End of instructions -->
                <form method="post" action="{{ route($routeBase.'.store') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="tax_year_id">Financial Year <span style="color: red;">*</span>:</label>
                                <select class="form-control select2" id="tax_year_id" name="tax_year_id" required>
                                    @php
                                    $pamTaxYears = \App\Models\PamTaxYear::all();
                                    @endphp
                                    <!-- Populate this dropdown with available tax years -->
                                    @foreach ($pamTaxYears as $year)
                                    <option value="{{ $year->id }}">{{ $year->code }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="code">Code <span style="color: red;">*</span>:</label>
                                <input type="text" class="form-control" id="code" name="code" required>
                                @error('code')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="employee_age_limit">Employee Age Limit <span style="color: red;">*</span>:</label>
                                <input type="number" step="1" class="form-control" id="employee_age_limit" name="employee_age_limit" required>
                                @error('employee_age_limit')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="minimum_monthly_gross_income">Minimum Monthly Gross Income <span style="color: red;">*</span>:</label>
                                <input type="number" step="0.01" class="form-control" id="minimum_monthly_gross_income" name="minimum_monthly_gross_income" required>
                                @error('minimum_monthly_gross_income')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="employee_contribution_rate">Employee Contribution Rate <span style="color: red;">*</span>:</label>
                                <input type="number" step="0.01" class="form-control" id="employee_contribution_rate" name="employee_contribution_rate" required>
                                @error('employee_contribution_rate')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="employer_contribution_rate">Employer Contribution Rate <span style="color: red;">*</span>:</label>
                                <input type="number" step="0.01" class="form-control" id="employer_contribution_rate" name="employer_contribution_rate" required>
                                @error('employer_contribution_rate')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="employee_maximum_ceiling">Employee Maximum Ceiling Amount <span style="color: red;">*</span>:</label>
                                <input type="number" step="0.01" class="form-control" id="employee_maximum_ceiling" name="employee_maximum_ceiling" required>
                                @error('employee_maximum_ceiling')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="employer_maximum_ceiling">Employer Maximum Ceiling Amount <span style="color: red;">*</span>:</label>
                                <input type="number" step="0.01" class="form-control" id="employer_maximum_ceiling" name="employer_maximum_ceiling" required>
                                @error('employer_maximum_ceiling')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label" for="status">Status <span style="color: red;">*</span>:</label>
                        <label><input type="radio" name="status" value="active" required> Active</label>
                        <label><input type="radio" name="status" value="inactive" required> Inactive</label>
                        @error('status')
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                    <button type="button" class="btn btn-dark" data-bs-dismiss="modal" aria-label="Close"> Close</button>
                    <button type="submit" class="btn btn-success">Submit</button>
                    <div class="mT-30">
                        @if(isset($error) || session('error'))
                        <div class="alert alert-danger">
                            {{ $error ?? session('error') }}
                        </div>
                        @endif
                    </div>
                </form>
            </div>

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

@endsection



@section('scripts')
<script>
    $(function(){
        $('#tax_year_id').select2({
            dropdownParent: $('#createModal')
        });
    });
</script>
@endsection