@extends('layouts.master')

@section('content')
<div id='mainContent'>
    <div class="container-fluid">
        <div class="row gap-20 masonry pos-r">
            <div class="masonry-sizer col-md-6"></div>
            <div class="masonry-item col-md-12">
                <div class="bgc-white p-20 bd">
                    <a href="{{ route($routeBase.'.index') }}"><i class="ti-arrow-left"></i></a>
                    <br><br>
                    <h5 class="c-grey-900">{{$pageTitle}}</h5>
                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <div class="mT-30">
                                <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:</label>
                                                <select class="form-control" id="tax_year_id" name="tax_year_id" required>
                                                    <!-- 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</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-12">
                                            <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>
                                                @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>
                                                @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>
                                                @error('employer_contribution_rate')
                                                <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_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>
                                                @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>
                                                @error('employer_maximum_ceiling')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label" for="status">Status</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="submit" class="btn btn-primary btn-color">Submit</button>
                                    <div class="mT-30">
                                        @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>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<script>
    // Wait for the DOM to load
    document.addEventListener('DOMContentLoaded', function () {
        // Select the flash message element
        var flashMessage = document.querySelector('.alert');

        // If the flash message element is present
        if (flashMessage) {
            // Set a timeout to hide the flash message after 5 seconds (5000ms)
            setTimeout(function () {
                flashMessage.style.display = 'none';
            }, 5000);
        }
    });
</script>