<div class="col-md-12">
    <div class="row mb-3">
        <div class="col-md-3">
            <button id="btn1" typtrip_detail="button" class="btn btn-primary"> ٹوپے کرایہ</button>
        </div>
        <div class="col-md-3">
            <button id="btn2" type="button" class="btn btn-secondary">پیڈ کرایہ</button>
        </div>
    </div>

    <form id="udpate_trip_detail_form">
        <div class="row toggle-row">
            <div class="col-md-3">
                <label for="act_freight">تاریخ:<span
                        class="text-danger">*</span></label>
                <input type="date" name="date" class="form-control change_focus" value="{{ $trip_detail->date?:'' }}"
                       data-id="">
                <span class="text-danger error" id="u_date_error"></span>
            </div>

            <div class="col-md-3">
                <label for="bility_number"> بلٹی نمبر:<span
                        class="text-danger">*</span></label>
                <input type="number" step="any" min="0" value="{{ $trip_detail->bility_number }}"
                       id="bility_number"
                       name="bility_number"
                       class="form-control change_focus" data-id="bility_number">
                <span class="text-danger error" id="bility_number_error"></span>
            </div>

            <div class="col-md-3">
                <label for="vourcher_number"> ووچر نمبر:<span
                        class="text-danger">*</span></label>
                <input type="number" step="any" min="0" value="{{ $trip_detail->vourcher_number }}" id="vourcher_number"
                       name="vourcher_number"
                       class="form-control change_focus" data-id="vourcher_number">
                <span class="text-danger error" id="vourcher_number_error"></span>
            </div>

            <div class="col-md-3">
                <div class="form-group">
                    <label for="from_city_id">لوڈنگ پوائنٹ (شہر)<span class="text-danger">*</span></label>
                    <select id="u_from_city_id" name="from_city"
                            class="form-control change_focus" data-id="u_to_city_id" autofocus>
                        <option disabled selected value="">SELECT</option>
                        @forelse ($cities as $city)
                            <option
                                value="{{ $city->id }}" {{ $trip_detail->from_city_id==$city->id ? "selected": '' }}>{{ $city->name }}</option>
                        @empty
                        @endforelse
                    </select>
                    <span class="text-danger error" id="u_from_city_error"></span>

                </div>
            </div>

        </div>
        <div class="row mt-2 toggle-row">
            <div class="col-md-3">
                <div class="form-group">
                    <label for="to_city_id">ان لوڈنگ پوائنٹ (شہر)<span class="text-danger">*</span></label>
                    <select id="u_to_city_id" name="to_city"
                            class="form-control  change_focus" data-id="broker_id">
                        <option value="">SELECT</option>
                        @forelse ($cities as $city)
                            <option
                                value="{{ $city->id }}" {{ $trip_detail->to_city_id==$city->id ? "selected": '' }}>{{ $city->name }}</option>
                        @empty
                        @endforelse
                    </select>
                    <span class="text-danger error" id="u_to_city_error"></span>
                </div>

            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="broker_id">پارٹی نام<span class="text-danger">*</span></label>
                    <select id="broker_id" name="broker" class="form-control change_focus"
                            data-id="item_name">
                        <option disabled value="">SELECT</option>
                        @forelse ($brokers as $broker)
                            <option
                                value="{{ $broker->id }}" {{ $broker->id == $trip_detail->broker_id? 'selected': '' }}>{{ $broker->name }}</option>
                        @empty
                        @endforelse
                    </select>
                    <span class="text-danger error" id="u_broker_error"></span>

                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group autocomplete">
                    <label for="item_name">مال کا نام<span class="text-danger">*</span></label>
                    <input type="text" id="item_name" name="item_name" value="{{ $trip_detail->item_name }}"
                           class="form-control change_focus"
                           data-id="weight_type">
                    <span class="text-danger error" id="u_item_name_error"></span>

                </div>
            </div>

            <div class="col-md-3">
                <div class="form-group">
                    <label for="item_weight">مال کا وزن<span class="text-danger">*</span></label>
                    <input type="number" min="0" step="any" id="u_item_weight" name="item_weight"
                           class="form-control change_focus" data-id="u_unit_rate"
                           value="{{ $trip_detail->item_weight }}" onchange="itemRate('yes')">
                    <span class="text-danger error" id="item_weight_error"></span>

                </div>
            </div>

        </div>
        <div class="row mt-2">

            <div class="col-md-3">
                <div class="form-group">
                    <label for="unit_rate">فی ٹن کرایہ<span class="text-danger">*</span></label>
                    <input type="number" min="0" step="any" value= "{{ $trip_detail->unit_rate  }}" id="u_unit_rate" name="unit_rate"
                           class="form-control change_focus" onchange="itemRate('yes')">
                    <span class="text-danger error" id="unit_rate_error"></span>
                </div>
            </div>

            <div class="col-md-3">
                <div class="form-group">
                    <label for="b_freight">بلٹی کرایہ<span class="text-danger">*</span></label>
                    <input type="number" min="0" value= "{{ $trip_detail->bill_freight}}" step="any" id="u_b_freight" name="b_freight"
                           class="form-control change_focus" onchange="itemRate('yes')">
                    <span class="text-danger error" id="b_freight_error"></span>
                </div>
            </div>

            <div class="col-md-3 toggle-row">
                <input type="hidden" value="{{ $trip_detail->bility_type }}" id="bility_type">
                <label for="advance_amount"> ایڈوانس رقم:<span
                        class="text-danger">*</span></label>
                <input type="number" step="any" min="0" value= "{{ $trip_detail->advance_amount}}" id="advance_amount"
                       name="advance_amount"
                       class="form-control change_focus" data-id="advance_amount">
                <span class="text-danger error" id="advance_amount_error"></span>
            </div>
            <div class="col-md-3 toggle-row">
                <label for="remainder_amount"> پہنچ بقایا رقم:<span
                        class="text-danger">*</span></label>
                <input type="number" step="any" min="0" value= "{{ $trip_detail->remainder_amount  }}" id="remainder_amount"
                       name="remainder_amount"
                       class="form-control change_focus" data-id="">
                <span class="text-danger error" id="remainder_amount_error"></span>
            </div>


        </div>
        <div class="row mt-2">
            <div class="col-md-3">
                <div class="form-group">
                    <label for="broker_point">بروکری اڈہ<span
                            class="text-danger">*</span></label>
                    <input type="number" step="any" onkeyup="calAmount('yes')" min="0" value= "{{ $trip_detail->broker_point  }}"
                           id="u_broker_point"
                           name="broker_point"
                           class="form-control change_focus" data-id="broker_point">
                    <span class="text-danger error" id="broker_point_error"></span>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="commission_party"> منشیانہ پارٹی<span class="text-danger">*</span></label>
                    <input type="number" step="any" onkeyup="calAmount('yes')" min="0" value= "{{ $trip_detail->commission_party  }}" id="u_commission_party" name="commission_party"
                           class="form-control change_focus" data-id="commission_party">
                    <span class="text-danger error" id="commission_party_error"></span>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="bility_commission">بلٹی کمیشن<span
                            class="text-danger">*</span></label>
                    <input type="number" step="any" min="0" value= "{{ $trip_detail->bility_commission  }}"
                           id="u_bility_commission"
                           name="bility_commission"
                           class="form-control change_focus" data-id="bility_commission" onkeyup="calAmount('yes')">
                    <span class="text-danger error" id="bility_commission_error"></span>
                </div>
            </div>

            <div class="col-md-3">
                <label for="act_freight">شارٹ وزن:<span
                        class="text-danger">*</span></label>
                <input type="number" step="any" onkeyup="calAmount('yes')" min="0" value= "{{ $trip_detail->fine  }}"
                       id="u_fine"
                       name="fine"
                       class="form-control change_focus" data-id="fine">
                <span class="text-danger error" id="fine_error"></span>
            </div>

        </div>
        <div class="row mt-2">
            <div class="col-md-3">
                <div class="form-group">
                    <label for="act_freight">دیہاڑی:<span
                            class="text-danger">*</span></label>
                    <input type="number" onkeyup="calAmount('yes')" step="any" min="0" value= "{{ $trip_detail->dehari}}"
                           id="u_dehari"
                           name="dehari"
                           class="form-control change_focus" data-id="dehari">
                    <span class="text-danger error" id="dehari_error"></span>
                </div>
            </div>
            <div class="col-md-3">
                <label for="labor">  مزدوری:<span
                        class="text-danger">*</span></label>
                <input type="number" onkeyup="calAmount('yes')" step="any" min="0" value= "{{ $trip_detail->labor}}" id="u_labor"
                       name="labor"
                       class="form-control change_focus" data-id="">
                <span class="text-danger error" id="labor_error"></span>
            </div>


            <div class="col-md-3">
                <label for="excise_expenditure">ایکسائز خرچہ:<span
                        class="text-danger">*</span></label>
                <input type="number"  step="any" onkeyup="calAmount('yes')" min="0" value= "{{ $trip_detail->excise_expenditure}}" id="u_excise_expenditure"
                       name="excise_expenditure"
                       class="form-control change_focus" data-id="">
                <span class="text-danger error" id="excise_expenditure_error"></span>
            </div>

            <div class="col-md-3">
                <label for="final_amount">ٹوٹل رقم:<span class="text-danger">*</span></label>
                <input type="number" readonly step="any" min="0"
                    value="{{trim($trip_detail->final_total_amount) }}"
                    id="u_final_amount" name="final_amount"
                    class="form-control change_focus" data-id="final_amount">
                <span class="text-danger error" id="final_amount_error"></span>
            </div>


        </div>
        <div class="row mt-2">
            <div class="col-md-3">
                @csrf
                <button name="createCitySubmit" id="trip_detail_sumbit_btn" class="btn btn-sm btn-primary"
                        type="submit">
                    اپڈیٹ
                </button>
                <input type="hidden" value="{{$trip_detail->id}}" name="update_id">
                <input type="hidden" value="{{$trip_detail->trip_id}}" name="trip_id">
                <input type="hidden" value="{{$trip_detail->advance_amount}}" name="old_advance">
                <input type="hidden" value="{{$trip_detail->tripDetailReach->remainder_amount}}" name="old_reach">
                <button type="button" class="btn btn-sm btn-info mt-3"
                        onclick="cancel_trip_detail_update_form('{{$trip_detail->trip_id}}')">کنسل
                </button>
            </div>
        </div>

    </form>

</div>


<script>
    var allRowsVisible = false;



    $(document).ready(function () {
        // Show only the first two rows by default


        $(".toggle-row").each(function (index) {
            if (index >= 2) {
                $(this).hide();
            }
        });

        // Function to reset form
        function resetForm() {
            $("#udpate_trip_detail_form").find("input, select").each(function () {
                $(this).val(''); // Clear the values
                if ($(this).prop('type') === 'radio' || $(this).prop('type') === 'checkbox') {
                    $(this).prop('checked', false); // Reset radio and checkbox inputs
                }
            });
        }

        // Function to check values of specific fields and show their rows if needed
        function checkFieldValues() {
            // var advanceAmount = parseFloat($("#advance_amount").val()) || 0;
            // var remainderAmount = parseFloat($("#remainder_amount").val()) || 0;
            var bilityType = $("#bility_type").val();


            if (bilityType === 'Paid') {
                $("#advance_amount").closest(".toggle-row").show();
                $("#remainder_amount").closest(".toggle-row").show();
                allRowsVisible = true;
            }
        }

        // Button 1: Show first two rows
        $("#btn1").on("click", function (e) {
            e.preventDefault();
            allRowsVisible = false;
            resetForm();
            $(".toggle-row").each(function (index) {
                if (index < 2) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
            checkFieldValues();
        });

        // Button 2: Show all rows
        $("#btn2").on("click", function (e) {
            e.preventDefault();
            resetForm();
            $(".toggle-row").show();
            allRowsVisible = true;
        });

        // Check field values on page load
        checkFieldValues();

        // Check field values on input change
        $("#advance_amount, #remainder_amount").on("input", function () {
            checkFieldValues();
        });
    });
</script>

