@extends('layouts.admin')
@section('title', 'New sale | Mintavia Admin')
<style>
    @media (min-width: 1400px) {
        #manageItem .modal-xl {
            max-width: 1450px;
        }

        #NewBatchModal .modal-dialog {
            max-width: 700px;
        }
    }

    /* Example colors for each input field */
    #barcode1 {
        background-color: #f0f8ff;
        /* Light blue for Barcode */
    }

    #mrp1 {
        background-color: #ffe4e1;
        /* Light coral for MRP */
    }

    #batch {
        background-color: #fafad2;
        border: 1px solid black
            /* Light goldenrod yellow for ALF */
    }

    #rate1 {
        background-color: #e6e6fa;
        /* Lavender for Rate */
    }

    #cost_alfa1 {
        background-color: #d3f8e2;
        /* Light green for ALF Cost */
    }

    #sale_price {
        background-color: #f5deb3;
        /* Wheat for Sale Price */
    }

    #sale_alfa {
        background-color: #ffebcd;
        /* Blanched almond for ALF Sale */
    }

    /* Optional: Add a border color or change text color */
    input.form-control {
        border: 1px solid #ccc;
        color: #333;
    }

    #batch1 {

        border: 3px solid black
    }
</style>
@section('content')

    <div class="row">
        <div class="col-12">
            <div class="card card-primary">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">New Tracking screen</h3>
                    <div class="ml-auto">
                        <a href="{{ route('admin.tracking.index-short') }}">
                            <button class="btn btn-sm btn-flat shadow rounded-0 btn-danger"><i
                                    class="fa fa-arrow-circle-left"></i> Back
                            </button>
                        </a>
                    </div>
                </div>
                <!-- /.card-header -->
                <form method="post" action="{{ route('admin.tracking.store') }}">
                    @csrf
                    <div class="card-body">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="date">Date</label>
                                        <input value="{{ old('date', date('Y-m-d')) }}" type="date"
                                            class="form-control @error('date') is-invalid @enderror" placeholder="Date"
                                            name="date" id="date" autofocus>
                                        <x-error field="date"></x-error>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="terms">Terms</label>
                                        <select class="form-control" name="terms" id="terms"
                                            onchange="checkConditions()">

                                            <option value="1">One Time</option>
                                            <option value="2">Regular</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="bill_no">Bill No.</label>
                                        <input type="taxt" class="form-control @error('bill_no') is-invalid @enderror"
                                            placeholder="Bill No." name="bill_no" id="bill_no"
                                            value="{{ $bill_no }}">
                                        <x-error field="bill_no"></x-error>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label>Party Name</label>
                                        <x-admin-input type="select" class="js-select2" name="party_name" id="party_name">
                                            <option value="">Party Name</option>
                                            @foreach ($account as $acc)
                                                <option value="{{ $acc->id }}">{{ $acc->name }}
                                                </option>
                                            @endforeach
                                        </x-admin-input>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="container-fluid">
                            <div class="row">

                                <div class="col-12">
                                    <div class="col-12 mt-3">
                                        <h5
                                            style="background-color: #dff0d8; padding: 8px; border-radius: 8px; display: inline-block; border: 1px solid #c3e6cb;">
                                            🧾 Purchase Bill Detail
                                        </h5>
                                    </div>
                                    <div class="col-12" id="purchase_bill_detail">
                                        <div class="row mt-2">
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="bill_Date"><strong>Bill Date</strong></label>
                                                    <input type="date" class="form-control" id="bill_Date"
                                                        name="bill_Date" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="purchase_bill_no"><strong>Bill No</strong></label>
                                                    <select class="form-control" id="purchase_bill_no"
                                                        name="purchase_bill_no" style="border-radius: 5px;">
                                                        <option value="">Select Bill No</option>
                                                        @foreach ($purchaseBills as $bill)
                                                            <option value="{{ $bill->bill_no }}"
                                                                data-date="{{ $bill->bill_Date }}">
                                                                {{ $bill->bill_no }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="account_id"><strong>Party Supplier Name</strong></label>
                                                    <select class="form-control" id="party_supplier_name"
                                                        name="party_supplier_name" style="border-radius: 5px;">
                                                        <option value="">Select Account</option>
                                                        @foreach ($account as $acc)
                                                            <option value="{{ $acc->id }}">{{ $acc->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="part_no"><strong>Part No</strong></label>
                                                    <select class="form-control" id="part_no" name="part_no"
                                                        style="border-radius: 5px;">
                                                        <option value="">Select part no</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="purchase_item_name"><strong>Item name</strong></label>
                                                    <input type="text" class="form-control" id="purchase_item_name"
                                                        name="purchase_item_name" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="in_sn"><strong>Purchase In SN </strong></label>
                                                    <select class="form-control" id="purchase_in_sn"
                                                        name="purchase_in_sn" style="border-radius: 5px;">
                                                        <option value="">Select Sirl Number</option>
                                                        @foreach ($serialNumbers as $serial)
                                                            <option value="{{ $serial->id }}">
                                                                {{ $serial->serial_number }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="row mt-2">
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="Brand"><strong>Brand</strong></label>
                                                    <input type="text" class="form-control" id="purchase_brand"
                                                        name="purchase_brand" style="border-radius: 5px;">
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="purchase_amount"><strong>Amount</strong></label>
                                                    <div style="position: relative;">
                                                        <input type="password" class="form-control" id="purchase_amount"
                                                            name="purchase_amount" style="border-radius: 5px;">
                                                        <span onclick="togglePassword()"
                                                            style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer;">
                                                            👁️
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 🔻 Separator between Purchase and Sale Sections -->
                                    <div class="col-12 text-center my-3">
                                        <h4
                                            style="background-color: #f0f0f0; padding: 10px; border-radius: 8px; border: 1px solid #ccc;">
                                        </h4>
                                    </div>
                                    <!-- 🔴 Sale Section Tag -->
                                    <div class="col-12 mt-3">
                                        <h5
                                            style="background-color: #f8d7da; padding: 8px; border-radius: 8px; display: inline-block; border: 1px solid #f5c6cb;">
                                            💼 Sale Bill Detail
                                        </h5>
                                    </div>
                                    <div class="col-12" id="sale_bill_detail">
                                        <div class="row">
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="Sale_Bill_Date"><strong>Sale Bill Date</strong></label>
                                                    <input type="date" class="form-control" id="Sale_Bill_Date"
                                                        name="Sale_Bill_Date" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="sale_bill_no"><strong>Bill N0</strong></label>
                                                    <select class="form-control" id="sale_bill_no" name="sale_bill_no"
                                                        style="border-radius: 5px;">
                                                        <option value="">Select Bill No</option>
                                                        @foreach ($saleBills as $bill)
                                                            <option value="{{ $bill->bill_no }}"
                                                                data-date="{{ $bill->bill_Date }}"
                                                                data-customer-id="{{ $bill->account_id }}">
                                                                {{-- Add this --}}
                                                                {{ $bill->bill_no }}
                                                            </option>
                                                        @endforeach

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

                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="customer_name"><strong>Customer Name</strong></label>
                                                    <select class="form-control" id="customer_name" name="customer_name">
                                                        <option value="">Select Customer</option>
                                                        @foreach ($bills as $bill)
                                                            <option value="{{ $bill->account->id }}"
                                                                data-details='@json($bill->customerDetails)'
                                                                data-accountdetails='@json($bill->account)'>
                                                                {{ $bill->account->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="WhatsApp_No"><strong>WhatsApp No</strong></label>
                                                    <input type="text" class="form-control" id="WhatsApp_No"
                                                        name="WhatsApp_No" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="Mobile_No"><strong>Mobile No</strong></label>
                                                    <input type="text" class="form-control" id="Mobile_No"
                                                        name="Mobile_No" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="Gmail_Address"><strong>Gmail Address</strong></label>
                                                    <input type="email" class="form-control" id="Gmail_Address"
                                                        name="Gmail_Address" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row mt-2">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="Address_1"><strong>Address 1</strong></label>
                                                    <input type="text" class="form-control" id="Address_1"
                                                        name="Address_1" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="Address_2"><strong>Address 2</strong></label>
                                                    <input type="text" class="form-control" id="Address_2"
                                                        name="Address_2" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="City_Village"><strong>City/Village</strong></label>
                                                    <input type="text" class="form-control" id="City_Village"
                                                        name="City_Village" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-1">
                                                <div class="form-group">
                                                    <label for="Pin_Code"><strong>Pin Code</strong></label>
                                                    <input type="text" class="form-control" id="Pin_Code"
                                                        name="Pin_Code" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="State"><strong>State</strong></label>
                                                    <input type="text" class="form-control" id="State"
                                                        name="State" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-1">
                                                <div class="form-group">
                                                    <label for="State_Code"><strong>State Code</strong></label>
                                                    <input type="text" class="form-control" id="State_Code"
                                                        name="State_Code" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="PAN_Card_No"><strong>PAN Card No</strong></label>
                                                    <input type="text" class="form-control" id="PAN_Card_No"
                                                        name="PAN_Card_No" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="Aadhar_Card_No"><strong>Aadhar Card No</strong></label>
                                                    <input type="text" class="form-control" id="Aadhar_Card_No"
                                                        name="Aadhar_Card_No" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="GSTIN"><strong>GSTIN</strong></label>
                                                    <input type="text" class="form-control" id="GSTIN"
                                                        name="GSTIN" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="Car_Bike_Name"><strong>Car/Bike Name</strong></label>
                                                    <input type="text" class="form-control" id="Car_Bike_Name"
                                                        name="Car_Bike_Name" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="Car_Bike_Number"><strong>Car/Bike Number</strong></label>
                                                    <input type="text" class="form-control" id="Car_Bike_Number"
                                                        name="Car_Bike_Number" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 text-center my-3">
                                            <h4
                                                style="background-color: #f0f0f0; padding: 5px; border-radius: 4px; border: 1px solid #ccc;">
                                            </h4>
                                        </div>
                                        <div class="row mt-2">
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="sale_part_no"><strong>Part Number</strong></label>
                                                    <select class="form-control" id="sale_part_no" name="sale_part_no"
                                                        style="border-radius: 5px;">
                                                        <option value="">Select part no</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="sale_item_name"><strong>Item name</strong></label>
                                                    <input type="text" class="form-control" id="sale_item_name"
                                                        name="sale_item_name" style="border-radius: 5px;">
                                                </div>
                                            </div>

                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="Sold_Sirl_Number"><strong>Sold Sirl Number</strong></label>
                                                    <select class="form-control" id="Sold_Sirl_Number"
                                                        name="Sold_Sirl_Number" style="border-radius: 5px;">
                                                        <option value="">Select Sold Sirl Number</option>
                                                        @foreach ($soldSerialNumbers as $serial)
                                                            <option value="{{ $serial->id }}">
                                                                {{ $serial->serial_number }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="Lot_No"><strong>Lot No</strong></label>
                                                    <select class="form-control" id="Lot_No" name="Lot_No"
                                                        style="border-radius: 5px;">
                                                        <option value="">Select Lot No</option>
                                                        @foreach ($lotNumbers as $lot)
                                                            <option value="{{ $lot->id }}">{{ $lot->lot_number }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="sale_brand"><strong>Brand</strong></label>
                                                    <input type="text" class="form-control" id="sale_brand"
                                                        name="sale_brand" style="border-radius: 5px;">
                                                </div>
                                            </div>

                                        </div>

                                        <div class="row mt-2">
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="Size"><strong>Size</strong></label>
                                                    <input type="text" class="form-control" id="Size"
                                                        name="Size" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="Weight"><strong>Weight</strong></label>
                                                    <input type="text" class="form-control" id="Weight"
                                                        name="Weight" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="Amount"><strong>Amount</strong></label>
                                                    <input type="text" class="form-control" id="sale_amount"
                                                        name="sale_amount" style="border-radius: 5px;">
                                                </div>
                                            </div>

                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="Date"><strong>Enquiry Date</strong></label>
                                                    <input value="{{ old('enquiry_date', date('Y-m-d')) }}"
                                                        type="date" class="form-control" id="enquiry_date"
                                                        name="enquiry_date" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="Next_Follow_Up_Date"><strong>Next Follow Up
                                                            Date</strong></label>
                                                    <input type="date" class="form-control" id="Next_Follow_Up_Date"
                                                        name="Next_Follow_Up_Date" style="border-radius: 5px;">
                                                </div>
                                            </div>

                                        </div>

                                        <div class="row mt-2">
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="Grawant_Warant"><strong>Guarantee/Warranty</strong></label>
                                                    <select class="form-control" id="Grawant_Warant"
                                                        name="Grawant_Warant" style="border-radius: 5px;">
                                                        <option value="">Select Option</option>
                                                        <option value="guarantee">guarantee</option>
                                                        <option value="warranty">warranty</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="Time"><strong>G&W Time</strong></label>
                                                    <input type="text" class="form-control" id="Time"
                                                        name="Time" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group">
                                                    <label for="Assigned"><strong>Assigned</strong></label>
                                                    <input type="text" class="form-control" id="Assigned"
                                                        name="Assigned" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="Descripaten"><strong>Descripaten</strong></label>
                                                    <input type="text" class="form-control" id="Descripaten"
                                                        name="Descripaten" style="border-radius: 5px;">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label for="Note"><strong>Note</strong></label>
                                                    <input type="text" class="form-control" id="Note"
                                                        name="Note" style="border-radius: 5px;">
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="row card-footer">
                                        <!-- Remark Section -->
                                        <div class="col-md-8">
                                            <div class="form-row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="remark_n"><strong>Remark</strong></label>
                                                        <input type="text" class="form-control" id="remark_n"
                                                            name="remark_n" style="border-radius: 5px;">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="remark_long"><strong>Remark Long</strong></label>
                                                        <input type="text" class="form-control" id="remark_long"
                                                            name="remark_long" style="border-radius: 5px;">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Buttons Section -->
                                        <div class="col-md-4 d-flex justify-content-end align-items-end">
                                            <button class="btn btn-danger ml-2" type="button">Delete</button>
                                            <button class="btn btn-success ml-2" type="button">Print</button>
                                            <button class="btn btn-success ml-2" type="submit">Create</button>
                                            <button class="btn btn-danger ml-2" type="button">Close</button>
                                        </div>
                                    </div>


                </form>
            </div>

            <!-- /.card -->
        </div>
    </div>
@endsection


@section('plugins.Select2', true)

@section('js')
    

    <script>
        function togglePassword() {
            const input = document.getElementById("purchase_amount");
            const type = input.getAttribute("type");
            input.setAttribute("type", type === "password" ? "text" : "password");
        }
        $(document).on('change', '#bill_Date', function(e) {
            $.ajax({
                url: '{{ route('admin.tracking.get-tracking-bill-numbers') }}',
                type: "POST",
                data: {
                    date: $(this).val()
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
            }).then(function(response) {
                $("#purchase_bill_no").empty();
                $('#purchase_bill_no').append(
                    $('<option>', {
                        value: "",
                        text: "Select Bill Number",
                        'account-id': ""
                    })
                );

                let billData = response.purchaseBills;
                $.each(billData, function(index, bill) {
                    $('#purchase_bill_no').append(
                        $('<option>', {
                            value: bill.bill_no,
                            text: bill.bill_no,
                            'account-id': bill.account_id
                        })
                    );
                });

            }).done(function(response) {

            })
        })
        $(document).on('change', '#purchase_bill_no', function(e) {
            let selectedOption = $(this).find('option:selected');
            let billNo = $(this).val(); // ✅ यह जोड़ा गया

            let accountId = selectedOption.attr('account-id');
            $("#party_supplier_name").val(accountId);

            // 🛠 Part Numbers AJAX
            $.ajax({
                url: '{{ route('admin.tracking.get-tracking-bill-part-numbers') }}',
                type: "POST",
                data: {
                    bill_id: billNo
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
            }).then(function(response) {
                let part_numbers = response.part_numbers;

                $("#part_no").empty().append(
                    $('<option>', {
                        value: "",
                        text: "Select Part Number"
                    })
                );

                $.each(part_numbers, function(index, part_number) {
                    $('#part_no').append(
                        $('<option>', {
                            value: part_number.product_part_no,
                            text: part_number.product_part_no,
                            'basic-net-amount': part_number.basic_net_amount,
                            'brand-name': part_number.brand_name,
                            'product-name': part_number.product_name,
                        })
                    );
                });
            });

            // ✅ Serial Numbers AJAX — corrected
            $.ajax({
                url: '{{ route('admin.tracking.get-serial-numbers') }}',
                type: "POST",
                data: {
                    bill_no: billNo // ✅ अब सही से defined है
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    let serials = response.serial_numbers;

                    $("#purchase_in_sn").empty().append(
                        $('<option>', {
                            value: "",
                            text: "Select Serial Number"
                        })
                    );

                    $.each(serials, function(index, item) {
                        $("#purchase_in_sn").append(
                            $('<option>', {
                                value: item.id,
                                text: item.serial_number
                            })
                        );
                    });
                }
            });
        });


        $(document).on('change', '#part_no', function(e) {
            let selectedOption = $(this).find('option:selected');
            let basic_net_amount = selectedOption.attr('basic-net-amount');
            let brand_name = selectedOption.attr('brand-name');
            let product_name = selectedOption.attr('product-name');
            $("#purchase_item_name").val(product_name)
            $("#purchase_brand").val(brand_name)
            $("#purchase_amount").val(basic_net_amount)
        })

        $(document).on('change', '#Sale_Bill_Date', function(e) {
            $.ajax({
                url: '{{ route('admin.tracking.get-tracking-sale-bill-numbers') }}',
                type: "POST",
                data: {
                    date: $(this).val()
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
            }).then(function(response) {
                $("#sale_bill_no").empty();
                $('#sale_bill_no').append(
                    $('<option>', {
                        value: "",
                        text: "Select Bill Number",
                        'account-id': ""
                    })
                );

                let billData = response.saleBills;
                $.each(billData, function(index, bill) {
                    $('#sale_bill_no').append(
                        $('<option>', {
                            value: bill.bill_no,
                            text: bill.bill_no,
                            'account-id': bill.account_id
                        })
                    );
                });

            }).done(function(response) {

            })
        })

        $(document).on('change', '#sale_bill_no', function(e) {
            // Get selected option
            let selectedOption = $(this).find('option:selected');

            // Get custom attribute value
            let accountId = selectedOption.attr('account-id');
            $("#customer_name").val(accountId)
            // Print it
            $.ajax({
                url: '{{ route('admin.tracking.get-tracking-sale-bill-part-numbers') }}',
                type: "POST",
                data: {
                    bill_id: $(this).val()
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
            }).then(function(response) {
                let part_numbers = response.part_numbers;
                handleCustomerSelection()

                $("#sale_part_no").empty();
                $('#sale_part_no').append(
                    $('<option>', {
                        value: "",
                        text: "Select Part Number",
                        'account-id': ""
                    })
                );

                $.each(part_numbers, function(index, part_number) {
                    $('#sale_part_no').append(
                        $('<option>', {
                            value: part_number.product_part_no,
                            text: part_number.product_part_no,
                            'basic-net-amount': part_number.basic_net_amount,
                            'brand-name': part_number.brand_name,
                            'product-name': part_number.product_name,
                        })
                    );
                });
                //
            }).done(function(response) {

            })
        })

        $(document).on('change', '#sale_part_no', function(e) {
            let selectedOption = $(this).find('option:selected');
            let basic_net_amount = selectedOption.attr('basic-net-amount');
            let brand_name = selectedOption.attr('brand-name');
            let product_name = selectedOption.attr('product-name');
            $("#sale_item_name").val(product_name)
            $("#sale_brand").val(brand_name)
            $("#sale_amount").val(basic_net_amount)
        })

        let selectedTerm = '1'; // default value (One Time)

        // Detect change in Terms
        $(document).on('change', '#terms', function() {
            selectedTerm = this.value;
        })

        function checkConditions() {
            selectedTerm = $("#terms").val()
        }


        // Listen to customer_name dropdown using delegated event
        $(document).on('change', '#customer_name', function() {
            handleCustomerSelection();
        });

        // Common function to handle customer selection
        function handleCustomerSelection() {

            console.log("selectedTerm === > ", selectedTerm);

            const selectedOption = $("#customer_name").find('option:selected');
            if (selectedTerm === '1') {
                const customerDetails = selectedOption.data('details');

                fillCustomerDetails(customerDetails);
            } else if (selectedTerm === '2') {
                const accountdetails = selectedOption.data('accountdetails');
                fillAccountDetails(accountdetails);
            }
        }


        // One Time Term – from customerDetails JSON
        function fillCustomerDetails(details) {
            if (!details) return;

            const data = details;

            document.getElementById('WhatsApp_No').value = data?.phone_no || '';
            document.getElementById('Mobile_No').value = data?.mobile_no || '';
            document.getElementById('Gmail_Address').value = data?.gmail_address || '';
            document.getElementById('Address_1').value = data?.Address_1 || '';
            document.getElementById('Address_2').value = data?.Address_2 || '';
            document.getElementById('City_Village').value = data?.village || '';
            document.getElementById('Pin_Code').value = data?.pin_code || '';
            document.getElementById('State').value = data?.state || '';
            document.getElementById('State_Code').value = data?.state_code || '';
            document.getElementById('PAN_Card_No').value = data?.pan_card_no || '';
            document.getElementById('Aadhar_Card_No').value = data?.aadhar_card_no || '';
            document.getElementById('GSTIN').value = data?.gstin || '';
            document.getElementById('Car_Bike_Name').value = data?.car_bike_name || '';
            document.getElementById('Car_Bike_Number').value = data?.car_bike_numbar || '';
        }


        function fillAccountDetails(jsonData) {


            // Directly set values for each form field
            document.getElementById('WhatsApp_No').value = jsonData['phone'] || '';
            document.getElementById('Mobile_No').value = jsonData['mobile'] || '';
            document.getElementById('Gmail_Address').value = jsonData['email'] || '';
            document.getElementById('Address_1').value = jsonData['address_1'] || '';
            document.getElementById('Address_2').value = jsonData['address_2'] || '';
            document.getElementById('City_Village').value = jsonData['city'] || '';
            document.getElementById('Pin_Code').value = jsonData['pincode'] || '';
            document.getElementById('State').value = jsonData['state'] || '';
            document.getElementById('State_Code').value = jsonData['state_code'] || '';
            document.getElementById('PAN_Card_No').value = jsonData['pan_card_no'] || '';
            document.getElementById('Aadhar_Card_No').value = jsonData['aadhaar_card'] || '';
            document.getElementById('GSTIN').value = jsonData['gst_no'] || '';
            console.log("accountdetails   ==== > ", accountdetails);
            return 0




            const option = selectedOption.data('details');

            console.log("Filled Form Fields with Data:", option);
            const map = {
                'phone': 'WhatsApp_No',
                'mobile': 'Mobile_No',
                'email': 'Gmail_Address',
                'address_1': 'Address_1',
                'address_2': 'Address_2',
                'city': 'City_Village',
                'pincode': 'Pin_Code',
                'state': 'State',
                'state_code': 'State_Code',
                'pan': 'PAN_Card_No',
                'aadhaar': 'Aadhar_Card_No',
                'gst': 'GSTIN',
            };

            const data = {};

            for (const key in map) {
                const fieldId = map[key];
                const value = option[key]; // safer than getAttribute for data-*
                data[key] = value;
                if (document.getElementById(fieldId)) {
                    document.getElementById(fieldId).value = value || '';
                }
            }


        }
    </script>

@endsection