@extends('layouts.master')

@section('content')

<div class="app-page-title">
    <div class="page-title-wrapper">
        <div class="page-title-heading">

            <div>
                {{ $pageTitle }}
                <!-- Add a brief description or instructions for the page here -->
                <p class="text-muted">Please fill in the form below to add a tax band for {{$pamTaxTable->description}}. Enter the starting and ending amounts for the tax band, along with the tax percentage. Select the status of the tax band and check the "Last band" option if it's the final band.</p>
            </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-tax-tables.index') }}"> <i class="fa fa-arrow-left"></i></a>
        <div class="row">
            <div class="mb-3 col-md-4">
                <div class="card-title text-center">Add a Tax Band for {{$pamTaxTable->description}} Table</div>


                <form method="post" action="{{ route($routeBase.'.store-tax-band') }}">

                    @csrf

                    <input type="hidden" name="tax_table_id" id="tax_table_id" value="{{ $pamTaxTable->id }}">



                    <div class="form-group">
                        <label for="from_amount">From Amount:</label>
                        <input type="number" step="0.01" class="form-control" id="from_amount" name="from_amount" required>
                        <!-- Enter the starting amount for the tax band -->
                    </div>
                    <div id="last_band_div">
                        <div class="form-group">
                            <label for="to_amount">To Amount:</label>
                            <input type="number" step="0.01" class="form-control" id="to_amount" name="to_amount" required>
                            <!-- Enter the ending amount for the tax band -->
                        </div>

                    </div>

                    <div class="form-group mb-3">
                        <label for="tax_percentage">Tax Percentage:</label>
                        <input type="number" step="0.01" class="form-control" id="tax_percentage" name="tax_percentage" required>
                        <!-- Enter the tax percentage for the tax band -->
                    </div>

                    <div class="form-group mb-3">
                        <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>
                        <!-- Select the status of the tax band -->
                    </div>
                    <div class="form-group mb-3">
                        <div class="form-check">
                            <label class="form-check-label" for="last_band">
                                Last band
                            </label>
                            <input class="form-check-input" type="checkbox" name="last_band" id="last_band">
                            <!-- Check this if it's the last tax band -->
                        </div>
                    </div>

                    <button type="button" class="btn btn-dark btn-color" onclick="window.location.href='{{ route('pam-tax-tables.index') }}'">Close</button>
                    <button type="submit" class="btn btn-success btn-color">Submit</button>

                </form>

            </div>
            <div class="mb-3 col-md-8">

                <div class="row">
                    <div class="col-md-12">
                        <!-- Button to open the create tax band modal -->
                        <!-- DataTable to display tax bands -->


                        <div class="main-card mb-3 card">
                            <div class="card-body">
                                <div class="card-title text-center">Existing Tax Bands for {{$pamTaxTable->description}}</div>
                                <table style="width: 100%;" id="example1" class="display nowrap table table-hover table-striped table-bordered">

                                    <thead>
                                        <!-- Define table headers here (e.g., 'From Amount,' 'To Amount,' 'Taxable Amount,' 'Tax Percentage,' etc.) -->
                                        <tr>
                                            <th>From Amount</th>
                                            <th>To Amount</th>
                                            <th>Taxable Amount</th>
                                            <th>Tax Percentage</th>
                                            <th>Actions</th>
                                            <!-- Add more columns as needed -->
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($pamTaxBands as $taxBand)
                                        <tr>
                                            <td>{{ $taxBand->from_amount }}</td>
                                            <td>{{ $taxBand->to_amount }}</td>
                                            <td>{{ $taxBand->taxable_amount }}</td>
                                            <td>{{ $taxBand->tax_percentage }}</td>
                                            <td style="text-align: right;">

                                                @canany('Manage tax tables definitions')
                                                <a href="{{ '/' . $routeBase . '/' . $taxBand->id .'/' . $taxBand->tax_table_id . '/destroy-tax-band' }}" class="btn btn-success btn-color">Del</a>

                                                @endcanany
                                            </td>
                                            <!-- Add more columns as needed -->
                                        </tr>
                                        @endforeach
                                        <!-- Tax bands data will be loaded dynamically via DataTables AJAX -->
                                    </tbody>
                                </table>

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

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

                // Show/hide inputs based on selected option
                $('#last_band').change(function() {
                    var checkedOption = $(this).is(':checked'); // Check if checkbox is checked

                    if (checkedOption) {
                        $('#last_band_div').hide();
                        $('#to_amount').val('0');
                    } else {
                        $('#last_band_div').show(); // Corrected typo here
                    }
                });
            });
        </script>
        @endsection