
<form class="row g-3 auto-width insentive_slab" action="{{ route('incentive-slabs.store')}}" method="post" enctype='multipart/form-data'>
    @csrf

    {{-- Name --}}
    <div class="col-md-6">
        <label for="slab_name" class="form-label">Slab Name <span class="text-danger"><b>*</b></span></label>
        <input type="text" class="form-control" id="slab_name" name="slab_name" aria-describedby="inputGroupPrepend" required>
        <span class="text-danger error_slab_name" style="display:none;">This field is required.</span>
    </div>
    {{-- Code --}}
    <div class="col-md-6">
        <label for="code" class="form-label">Code </label>
        <input type="text" class="form-control" id="code" name="code" aria-describedby="inputGroupPrepend" required>
    </div>

    {{-- Accounts --}}
    <div class="col-md-6">
        <div>
            <label for="account_type_id" class="form-label">Account Type <span class="text-danger"><b>*</b></span></label>
        </div>
        <div class="input-group">
            <select class="single-select form-control" name="account_type_id">
                <option value=""> ---Select Account Type ---</option>
                @foreach ($MasterType as $list)
                <option value="{{ $list->id }}">{{ $list->type_name }}</option>
                @endforeach
            </select>
        </div>
        <span class="text-danger error_account_type_id" style="display: none;">This field is required.</span>
    </div>
     {{-- Calaulation Type --}}
     <div class="col-md-6">
        <label for="calculation_type" class="form-label" >Calculation Type </label>
        <select class="form-select" aria-label="calculation_type" name="calculation_type" id="calculation_type">
            <option selected value="">Select Calculation Type</option>
            <option value="percentage">PERCENTAGE</option>
            <option value="rate_per_piece">RATE PER PIECE</option>
          </select>
        <span class="text-danger error_calculation_type" style="display:none;">This field is required.</span>
    </div>
    <div class="col-md-6">
       {{-- percentage --}}
        <label for="percentage" id="percentage_label" class="form-label">Percentage % </label>
        <input type="number" class="form-control" id="percentage" name="percentage" aria-describedby="inputGroupPrepend" required>

      {{-- price --}}
        <label for="price" id="price_label" class="form-label">Price </label>
        <input type="number" class="form-control" id="price" name="price" aria-describedby="inputGroupPrepend" required>
    </div>
     {{-- company --}}
    {{-- <div class="col-md-6">
        <div>
            <label for="company_id" class="form-label">Company <span class="text-danger"><b>*</b></span></label>
        </div>
        <div class="input-group">
            <select class="single-select form-control" name="company_id">
                @foreach ($company as $list)
                    <option value="{{ $list->id }}">{{ $list->name }}</option>
                @endforeach
            </select>
        </div>
        <span class="text-danger error_company_id" style="display: none;">This field is required.</span>
    </div> --}}
</form>

{{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> --}}
<script>
    $(document).ready(function() {
    // Initially hide both label and input
    $('#percentage_label, #percentage').hide();
    $('#price_label, #price').hide();

    // When the calculation type changes
    $('#calculation_type').on('change', function() {
        // Get the selected value
        var selectedValue = $(this).val();

        // Hide both label and input
        $('#percentage_label, #percentage').hide();
        $('#price_label, #price').hide();

        // Show the label and input based on the selected value
        if (selectedValue === 'percentage') {
            $('#percentage_label, #percentage').show();
        } else if (selectedValue === 'rate_per_piece') {
            $('#price_label, #price').show();
        }
    });
});
</script>
