@extends('hr_main')
@section('title', '| ' . $data['pageTitle'])
@section('content')
    <div class="row add-data-form">
        <div class="col-md-12">
            <div class="col-md-8 col-md-offset-2 fullbody">
                <div class="viewTitle" style="border-bottom:1px solid white;">
                    <a href="{{ $data['listBtnUrl'] }}" class="btn btn-info pull-right addViewBtn">
                        <i class="glyphicon glyphicon-th-list viewIcon"></i>
                        {{ $data['listBtnLabel'] }}
                    </a>
                </div>
                <div class="panel panel-default panel-border">
                    <div class="panel-heading">
                        <div class="panel-title">{{ $data['pageTitle'] }}</div>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">

                                {!! Form::open(['url' => '', 'role' => 'form', 'class' => 'form-horizontal form-groups']) !!}
                              
                                <div class="form-group">
                                    <label class='col-sm-2 control-label'><b>Fiscal Year</b><span style="color: red;">*</span></label>
                                    <div class="col-sm-4">
                                        {!! Form::select('fiscal_year_id', $data['fiscal_years'], null,
                                        ['class' => 'form-control', 'id' => 'fiscal_year_id']) !!}
                                    </div>
                                </div>
                                <br>
                                    
                                <h5><b><u>For Male:</u></b></h5>
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered dataTable" id="table_for_male">
                                        <tr>
                                            <th colspan="2">Taxable Amount</th>
                                            <th>Tax Percentage (Digit)</th>
                                            <th>Action</th>
                                        </tr>
                                        <tbody class='table_for_male_rows'>
                                            <tr>
                                                <td style='text-align: center;'>
                                                    <input style='text-align: right;' type='text' name='level_for_male[]' value='First' class='form-control level_for_male' readonly />
                                                </td>
                                                <td>
                                                    <input style='text-align: right;' type='text' name='taxable_amount_for_male[]' value='&#8734;' class='form-control taxable_amount_for_male' readonly />
                                                </td>
                                                <td class='col-md-3'>
                                                    <input style='text-align: center;' type='text' name='tax_percentage_for_male[]' class='form-control tax_percentage_for_male' />
                                                </td>
                                                <td class='col-md-3 text-center'>
                                                    <button style='margin:auto; display:block;' type='button' name='add' class='btn btn-success add_row_for_male'>+</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                </br>

                                <h5><b><u>For Female:</u></b></h5>
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered dataTable" id="table_for_female">
                                        <tr>
                                            <th colspan="2">Taxable Amount</th>
                                            <th>Tax Percentage (Digit)</th>
                                            <th>Action</th>
                                        </tr>
                                        <tbody class='table_for_female_rows'>
                                            <tr>
                                                <td style='text-align: center;'>
                                                    <input style='text-align: right;' type='text' name='level_for_female[]' value='First' class='form-control level_for_female' readonly />
                                                </td>
                                                <td>
                                                    <input style='text-align: right;' type='text' name='taxable_amount_for_female[]' value='&#8734;' class='form-control taxable_amount_for_female' readonly />
                                                </td>
                                                <td class='col-md-3'>
                                                    <input style='text-align: center;' type='text' name='tax_percentage_for_female[]' class='form-control tax_percentage_for_female' />
                                                </td>
                                                <td class='col-md-3 text-center'>
                                                    <button style='margin:auto; display:block;' type='button' name='add' class='btn btn-success add_row_for_female'>+</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                </br>

                                <div class="form-group">
                                    <div class="col-sm-7 col-sm-offset-5">
                                        {!! Form::submit('Submit', ['id' => 'submit', 'class' => 'btn btn-info']) !!}
                                        <a href="{{ $data['listBtnUrl'] }}"
                                            class="btn btn-danger closeBtn">Close</a>
                                    </div>
                                </div>

                                {!! Form::close() !!}

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<script src="{{ asset('js/jquery-1.11.1.min.js') }}"></script>

<script type="text/javascript">
    $(document).ready(function() {

        $('form').submit(function(event) {
            event.preventDefault();
            $("#submit").prop('disabled', true);

            $.ajax({
                type: 'post',
                url: "{{ route('income-tax-slab-rate-configure-store') }}",
                data: $('form').serialize(),
                dataType: 'json',
                success: function(__response) {
                    if(__response.status == false) {
                        toastr.error(__response.message);
                        $("#submit").prop('disabled', false);
                    }

                    if(__response.status == true) {
                        toastr.success(__response.message);
                        setTimeout(function() { location.reload(); }, 1000);
                    }
                },
                error: function(error) {
                    toastr.error('Something went wrong!');
                    $("#submit").prop('disabled', false);
                }
            });
        });

        // For Male
        $(document).on("click", ".add_row_for_male", function() {
            var tableLength = $('.table_for_male_rows tr').length;
            
            if(tableLength == 1) {
                $(this).closest('tr').find('.taxable_amount_for_male').val('');
                $(this).closest('tr').find('.taxable_amount_for_male').removeAttr('readonly');
                
                var addNewRow = "<tr>" +
                        "<td style='text-align: center;'>" + 
                            "<input style='text-align: right;' type='text' name='level_for_male[]' value='Next' class='form-control level_for_male' readonly />" +
                        "</td>" +
                        "<td>" +
                            "<input style='text-align: right;' type='text' name='taxable_amount_for_male[]' value='&#8734;' class='form-control taxable_amount_for_male' readonly />" +
                        "</td>" +
                        "<td class='col-md-3'>" +
                            "<input style='text-align: center;' type='text' name='tax_percentage_for_male[]' class='form-control tax_percentage_for_male' />" +
                        "</td></tr>";

                $(this).closest("tr").after(addNewRow);
            }
            else {
                var addNewRow = "<tr>" +
                        "<td style='text-align: center;'>" +
                            "<input style='text-align: right;' type='text' name='level_for_male[]' value='Next' class='form-control level_for_male' readonly />" +
                        "</td>" +
                        "<td>" +
                            "<input style='text-align: right;' type='text' name='taxable_amount_for_male[]' value='' class='form-control taxable_amount_for_male' />" +
                        "</td>" +
                        "<td class='col-md-3'>" +
                            "<input style='text-align: center;' type='text' name='tax_percentage_for_male[]' class='form-control tax_percentage_for_male' />" +
                        "</td>" +
                        "<td class='col-md-3 text-center'>" +
                            "<button type='button' name='add' class='btn btn-success add_row_for_male'>+</button>" +
                            "<button type='button' name='add' class='btn btn-danger remove_row_for_male'>-</button>" +
                        "</td></tr>";

                $(this).closest("tr").after(addNewRow);
            }
        });

        $(document).on("input", ".taxable_amount_for_male", function() {
            this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
        });

        $(document).on("input", ".tax_percentage_for_male", function() {
            this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
        });
        
        $(document).on("click", ".remove_row_for_male", function() {
            var preVal = $(this).closest('tr').next('tr').find('.taxable_amount_for_male').val();
            var setVal = (preVal) ? parseInt(preVal) : '';

            setVal = (isNaN(setVal)) ? '∞' : setVal;
            $(this).closest('tr').next('tr').find('.taxable_amount_for_male').val(setVal);
            $(this).closest("tr").remove();
        });

        // For Female
        $(document).on("click", ".add_row_for_female", function() {
            var tableLength = $('.table_for_female_rows tr').length;
            
            if(tableLength == 1) {
                $(this).closest('tr').find('.taxable_amount_for_female').val('');
                $(this).closest('tr').find('.taxable_amount_for_female').removeAttr('readonly');
                
                var addNewRow = "<tr>" +
                        "<td style='text-align: center;'>" + 
                            "<input style='text-align: right;' type='text' name='level_for_female[]'  value='Next' class='form-control level_for_female' readonly />" +
                        "</td>" +
                        "<td>" +
                            "<input style='text-align: right;' type='text' name='taxable_amount_for_female[]' value='&#8734;' class='form-control taxable_amount_for_female' readonly />" +
                        "</td>" +
                        "<td class='col-md-3'>" +
                            "<input style='text-align: center;' type='text' name='tax_percentage_for_female[]' class='form-control tax_percentage_for_female' />" +
                        "</td></tr>";

                $(this).closest("tr").after(addNewRow);
            }
            else {
                var addNewRow = "<tr>" +
                        "<td style='text-align: center;'>" +
                            "<input style='text-align: right;' type='text' name='level_for_female[]' value='Next' class='form-control level_for_female' readonly />" +
                        "</td>" +
                        "<td>" +
                            "<input style='text-align: right;' type='text' name='taxable_amount_for_female[]' value='' class='form-control taxable_amount_for_female' />" +
                        "</td>" +
                        "<td class='col-md-3'>" +
                            "<input style='text-align: center;' type='text' name='tax_percentage_for_female[]' class='form-control tax_percentage_for_female' />" +
                        "</td>" +
                        "<td class='col-md-3 text-center'>" +
                            "<button type='button' name='add' class='btn btn-success add_row_for_female'>+</button>" +
                            "<button type='button' name='add' class='btn btn-danger remove_row_for_female'>-</button>" +
                        "</td></tr>";

                $(this).closest("tr").after(addNewRow);
            }
        });

        $(document).on("input", ".taxable_amount_for_female", function() {
            this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
        });

        $(document).on("input", ".tax_percentage_for_female", function() {
            this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
        });
        
        $(document).on("click", ".remove_row_for_female", function() {
            var preVal = $(this).closest('tr').next('tr').find('.taxable_amount_for_female').val();
            var setVal = (preVal) ? parseInt(preVal) : '';
            
            setVal = (isNaN(setVal)) ? '∞' : setVal;
            $(this).closest('tr').next('tr').find('.taxable_amount_for_female').val(setVal);
            $(this).closest("tr").remove();
        });
    });
</script>