@extends('admin.layouts.app')

@section('content')
@push('styles')
<div class="container-fluid py-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb bg-transparent mb-0 pb-0 px-0 me-sm-6 me-5">
            <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="{{ route('admin.dashboard') }}">Dashboard</a>
            </li>
            <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="{{ route('admin.tapl-contracts.index') }}">Performa Invoices</a>
            </li>
            <li class="breadcrumb-item text-sm text-dark active font-weight-bolder" aria-current="page">
              Performa Invoice Create</li>
        </ol>
    </nav>
    @if($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
  <div class="row">
      <div class="col-12">
          <div class="row justify-content-between">
              <div class="col-md-4">
                  <a class="btn bg-gradient-info mb-3" href="{{ route('admin.tapl-contracts.index') }}">Back</a>
              </div>
          </div>
      </div>
  </div>
  <div class="row">
      <div class="col-12">
          <form role="form" action="{{ route('admin.tapl-contracts.store') }}" method="POST" id="tapl-form">
            @csrf
              <div class="row justify-content-center">
                  <div class="col-md-12 col-sm-12">
                      <div class="card pt-3 mb-4">
                          <div class="card-body pt-0 pb-2">
                              <div class="row">
                                  <div class="col-md-6">
                                      <label>Performa Invoice No <span class="requered-mark">*</span></label>
                                      <div class="mb-3">
                                          <input type="text" class="form-control" placeholder="" name="performa_invoice_no" value="{{ $performaInvoiceNo }}" readonly>
                                        @error('performa_invoice_no')
                                          <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                      </div>
                                  </div>
                                {{-- <div class="col-md-6">
                                    <label>System Contract ID No <span class="requered-mark">*</span></label>
                                    <div class="mb-3 form-search">
                                        <input type="text" class="form-control" placeholder="" name="system_contract_id_no" value="{{ $contractNo }}" readonly>
                                    </div>
                                </div> --}}
                                <div class="col-md-6">
                                    <label>Work Order Recieve Date <span class="requered-mark">*</span></label>
                                    <div class="mb-3 form-search">
                                        <input type="date" class="form-control" placeholder="" name="work_order_recieve_date" value="{{ old('work_order_recieve_date', date('Y-m-d')) }}" >
                                    </div>
                                </div>
                                
                                  <div class="col-md-6">
                                      <label>Customer ID No <span class="requered-mark">*</span></label>
                                      <div class="mb-3">
                                        <select class="form-control" name="customer_id_no" required>
                                            <option value=""></option>
                                            @foreach($customers as $customer)
                                            <option value="{{ $customer->id }}" {{ old('customer_id_no') == $customer->id ? 'selected' : '' }}>
                                                {{ $customer->customer_id }} 
                                            </option>
                                            @endforeach
                                        </select>
                                          @error('customer_id_no')
                                          <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                        <div id="customer_id_no_error" class="text-danger"></div>
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                      <label>Customer Name <span class="requered-mark">*</span></label>
                                      <div class="mb-3">
                                          <input type="text" class="form-control" placeholder="Customer Name" name="customer_name" value="{{ old('customer_name') }}" maxlength="30" required>
                                          @error('customer_name')
                                          <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                    <label>Address Line 1 <span class="requered-mark">*</span></label>
                                    <div class="mb-3">
                                        <textarea style="height: 128px;" class="form-control" placeholder="Address Line 1" value="{{ old('address_line_1') }}" name="address_line_1" id="address_line_1" required></textarea>
                                        @error('address_line_1')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <label>Address Line 2</label>
                                    <div class="mb-3">
                                        <textarea style="height: 128px;" class="form-control" placeholder="Address Line 2" value="{{ old('address_line_2') }}" name="address_line_2" id="address_line_2"></textarea>
                                    </div>
                                    <div class="mb-3">
                                        <input type="checkbox" id="copy_address_checkbox">
                                        <label for="copy_address_checkbox">Same as Address Line 1</label>
                                    </div>
                                </div>
                                
                                  <div class="col-md-6">
                                      <label>AMC Start Date <span class="requered-mark">*</span></label>
                                      <div class="mb-3">
                                          <input type="date" class="form-control" placeholder="" name="amc_start_date" value="{{ old('amc_start_date', date('Y-m-d')) }}" required>
                                          @error('amc_start_date')
                                          <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                      <label>AMC End Date <span class="requered-mark">*</span></label>
                                      <div class="mb-3">
                                        <input type="date" class="form-control" placeholder="" name="amc_end_date" value="{{ old('amc_end_on_date', date('Y-m-d')) }}" min="{{ date('Y-m-d') }}" required>
                                          @error('amc_end_date')
                                          <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                    <label>Type of AMC <span class="requered-mark">*</span></label>
                                    <div class="mb-3">
                                        <input type="text" class="form-control type_of_amc" name="type_of_amc" value="TAPL" readonly>
                                        {{-- <select class="form-control" name="type_of_amc" required>
                                            <option value="1" {{ old('type_of_amc') == '1' ? 'selected' : '' }}>BlueStar</option>
                                            <option value="2" {{ old('type_of_amc') == '2' ? 'selected' : '' }}>TAPL</option>
                                            <option value="3" {{ old('type_of_amc') == '3' ? 'selected' : '' }}>ODS</option>
                                        </select> --}}
                                        @error('type_of_amc')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>                                
                                <div class="col-md-6">
                                    <label>Executive Name <span class="requered-mark">*</span></label>
                                    <div class="mb-3">
                                        <select class="form-control" name="staff_id" required>
                                            <option value="">Select Executive</option>
                                            @foreach ($staffs as $staff)
                                                <option value="{{ $staff->id }}" {{ old('staff_id', $lastStaffId) == $staff->id ? 'selected' : '' }}>
                                                    {{ $staff->staff_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('staff_id')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                
                                
                                  <div class="col-md-6">
                                      <label>Machine Quantity <span class="requered-mark">*</span></label>
                                      <div class="mb-3">
                                          <input type="num" class="form-control" id="machine_quantity" name="machine_quantity" value="{{ old('machine_quantity', 0) }}" required>
                                          @error('machine_quantity')
                                          <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                      <label>Machine Tonnage <span class="requered-mark">*</span></label>
                                      <div class="mb-3">
                                          {{-- <input type="text" class="form-control" placeholder="Ton Rate" name="machine_tonnage" id="total_machine_tonnage" value="{{ old('machine_tonnage', 0) }}" required> --}}
                                          <input type="text" class="form-control" placeholder="Ton Rate" name="machine_tonnage" id="machine_tonnage" value="{{ old('machine_tonnage', 0) }}" required>
                                          @error('machine_tonnage')
                                          <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                      <label>Number Of Contracts <span class="requered-mark">*</span></label>
                                      <div class="mb-3">
                                          <input type="num" class="form-control" placeholder="5" name="number_of_contracts" value="{{ old('number_of_contracts',  @$taplContractRecords ?? '0') }}" required>
                                          @error('number_of_contracts')
                                          <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                    <label>AMC Starting Year</label>
                                    <div class="mb-3">
                                        <input type="number" class="form-control" placeholder="2023" name="amc_starting_year" value="{{ old('amc_starting_year', 2023) }}" maxlength="4">
                                    </div>
                                </div>                             
                                  <div class="col-md-6">
                                      <label>Last Year Customer Order Value</label>
                                      <div class="mb-3">
                                        <input type="text" class="form-control" placeholder="Value" name="last_year_customer_order_value" value="{{ old('last_year_customer_order_value', @$lastYearCustomerOrderValue ?? '0.00') }}">
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                      <label>Increment % (Asking)</label>
                                      <div class="mb-3">
                                          <input type="text" class="form-control" placeholder="25%" name="increment_percentage" id="increment_percentage" value="{{ old('increment_percentage', @$lastYearIncrementPercentage ?? '0') }}">
                                      </div>
                                  </div>
                                  <div class="col-md-12">
                                      <div class="row">
                                          <div class="table-responsive p-0 mb-3">
                                              <table class="table align-items-center mb-0">
                                                <thead>
                                                  <tr>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="text-align: center !important;">
                                                      SL.No</th>
                                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2" style="text-align: center !important;">
                                                      TON</th>
                                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="text-align: center !important;">
                                                      UQM</th>
                                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="text-align: center !important;">
                                                      QTY</th>
                                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="text-align: center !important;">
                                                      Brand</th>
                                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="text-align: center !important;">
                                                      Model No</th>
                                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="text-align: center !important;">
                                                      Serial No</th>
                                                      <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="text-align: center !important;">
                                                          Location</th>
                                                      <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="text-align: center !important;">
                                                          Action</th>
                                                  </tr>
                                                </thead>
                                                <tbody>
                                                    @if($taplContractDetails->isEmpty())
                                                    <tr class="data-row">
                                                        <td>
                                                          <input type="text" class="form-control text-center" style="width: 70px;" placeholder="" value="1" name="data[0][sl_no]" readonly>
                                                        </td>
                                                        <td>
                                                          <input type="text" class="form-control text-center ton" style="width: 70px;" placeholder="ton" name="data[0][ton]">
                                                        </td>
                                                        <td>
                                                          <input type="text" class="form-control text-center" style="width: 70px;" placeholder="uqm" name="data[0][uqm]">
                                                        </td>
                                                        <td>
                                                          <input type="text" class="form-control text-center qty" style="width: 70px;" placeholder="qty" name="data[0][qty]">
                                                        </td>
                                                        <td>
                                                          <input type="text" class="form-control text-center" style="width: 70px;" placeholder="brand" name="data[0][brand]">
                                                        </td>
                                                        <td>
                                                          <input type="text" class="form-control text-center" style="width: 70px;" placeholder="model no" name="data[0][model_no]">
                                                        </td>
                                                        <td>
                                                          <input type="text" class="form-control text-center" style="width: 70px;" placeholder="serial no" name="data[0][serial_no]">
                                                        </td>
                                                        <td>
                                                          <input type="text" class="form-control text-center" style="width: 70px;" placeholder="UPS Room" name="data[0][location]">
                                                        </td>
                                                        <td>
                                                          <ul class="nav table-btn-group" style="flex-wrap: nowrap; justify-content: end;">
                                                              <li class="nav-item">
                                                                  <a class="btn bg-gradient-info mb-0 mr-2 btn-sm add-row" href="#">ADD</a>
                                                              </li>
                                                              <li class="nav-item">
                                                                  <a class="btn bg-gradient-info mb-0 mr-2 btn-sm delete-row" href="#">Delete</a>
                                                              </li>
                                                          </ul>
                                                      </td>
                                                    </tr>
                                                    @else
                                                    @php
                                                    $sortedDetails = $taplContractDetails->sortBy('sl_no');
                                                    @endphp
                                                    @foreach ($sortedDetails as $taplDetail)
                                                    <tr class="data-row">
                                                        <td>
                                                            <input type="text" class="form-control text-center" style="width: 70px;" placeholder="1" value="{{ $loop->iteration }}" name="data[{{ $loop->index }}][sl_no]" readonly>
                                                        </td>
                                                        <td>
                                                            <input type="text" class="form-control text-center ton" style="width: 70px;" placeholder="1" name="data[{{ $loop->index }}][ton]" value="{{ $taplDetail->ton }}">
                                                        </td>
                                                        <td>
                                                            <input type="text" class="form-control text-center" style="width: 70px;" placeholder="1" name="data[{{ $loop->index }}][uqm]" value="{{ $taplDetail->uqm }}">
                                                        </td>
                                                        <td>
                                                            <input type="text" class="form-control text-center qty" style="width: 70px;" placeholder="1" name="data[{{ $loop->index }}][qty]" value="{{ $taplDetail->qty }}">
                                                        </td>
                                                        <td>
                                                            <input type="text" class="form-control text-center" style="width: 70px;" placeholder="1" name="data[{{ $loop->index }}][brand]" value="{{ $taplDetail->brand }}">
                                                        </td>
                                                        <td>
                                                            <input type="text" class="form-control text-center" style="width: 70px;" placeholder="1" name="data[{{ $loop->index }}][model_no]" value="{{ $taplDetail->model_no }}">
                                                        </td>
                                                        <td>
                                                            <input type="text" class="form-control text-center" style="width: 70px;" placeholder="1" name="data[{{ $loop->index }}][serial_no]" value="{{ $taplDetail->serial_no }}">
                                                        </td>
                                                        <td>
                                                            <input type="text" class="form-control text-center" style="width: 70px;" placeholder="UPS Room" name="data[{{ $loop->index }}][location]" value="{{ $taplDetail->location }}">
                                                        </td>
                                                        <td>
                                                            <ul class="nav table-btn-group" style="flex-wrap: nowrap; justify-content: end;">
                                                                <li class="nav-item">
                                                                    <a class="btn bg-gradient-info mb-0 mr-2 btn-sm add-row" href="#">ADD</a>
                                                                </li>
                                                                <li class="nav-item">
                                                                    <a class="btn bg-gradient-info mb-0 mr-2 btn-sm delete-row" href="#">Delete</a>
                                                                </li>
                                                            </ul>
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                    @endif
                                                </tbody>
                                              </table>
                                            </div>
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                      <label>Performa Amount <span class="requered-mark">*</span></label>
                                      <div class="mb-3">
                                          <input type="text" class="form-control" placeholder="25000" name="performa_amount" id="performa_amount" required value="{{ old('performa_amount') }}">
                                          @error('performa_amount')
                                          <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                      <label>Last Year Increment <span class="requered-mark">*</span></label>
                                      <div class="mb-3">
                                          <input type="text" class="form-control" placeholder="2023" name="last_year_increment" required value="{{ old('last_year_increment', $lastYearIncrementValue ?? '0') }}">
                                          @error('last_year_increment')
                                          <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                      <label>Basic</label>
                                      <div class="mb-3">
                                          <input type="text" class="form-control" placeholder="Basic" name="basic" id="basic" value="{{ old('basic') }}">
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                      <label>Last Year Billed Bill No</label>
                                      <div class="mb-3">
                                          <input type="text" class="form-control" placeholder="BL_0001" name="last_year_billed_bill_no" value="{{ old('last_year_billed_bill_no', @$lastBilledNo) }}">
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                      <label>GST</label>
                                      <div class="mb-3">
                                          <input type="text" class="form-control" placeholder="GST" name="gst" value="{{ old('gst') }}">
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                      <label>AMC End On Date <span class="requered-mark">*</span></label>
                                      <div class="mb-3">
                                          <input type="date" class="form-control" name="amc_end_on_date" required value="{{ old('amc_end_on_date', date('Y-m-d')) }}" min="{{ date('Y-m-d') }}">
                                      </div>
                                  </div>
                                  <div class="col-md-6">
                                      <label>Total Performa Amount <span class="requered-mark">*</span></label>
                                      <div class="mb-3">
                                          <input type="num" class="form-control" placeholder="75000" name="total_performa_amount" id="total_performa_amount" required value="{{ old('total_performa_amount') }}">
                                      </div>
                                  </div>
                                  <div class="col-12">
                                      {{-- <a class="btn bg-gradient-info mb-3" style="float: right;" role="button" data-bs-toggle="modal" data-bs-target="#exampleModal" 
                                          href="">Save & Print</a> --}}
                                          <input type="button" id="saveButton" value="Save & Print" class="btn bg-gradient-info mb-3" style="float: right;">
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </form>
      </div>
  </div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    updateMachineTonnage();
  $('#machine_quantity, #increment_percentage, #basic, #performa_amount,#machine_tonnage, #total_performa_amount').on('input', function() {
    var inputValue = $(this).val().replace(/\D/g, '');
    $(this).val(inputValue);
  });
});

$(document).ready(function () {
    // Listen for changes in the "Increment Percentage" field
    $('input[name="increment_percentage"]').on('input', function () {
        calculateAmounts();
    });

    $('input[name="last_year_customer_order_value"]').on('input', function () {
        calculateAmounts();
    });

    // Trigger the calculation on page load
    calculateAmounts();

    // Function to calculate amounts
    function calculateAmounts() {
        var incrementPercentage = parseFloat($('input[name="increment_percentage"]').val()) || 0;
        var lastYearOrderValue = parseFloat($('input[name="last_year_customer_order_value"]').val()) || 0;
        var gstPercentage = parseFloat($('input[name="gst_percentage"]').val()) || 0;

        // Check if both incrementPercentage and lastYearOrderValue are 0
        if (incrementPercentage === 0 || incrementPercentage == null && lastYearOrderValue === 0 || lastYearOrderValue == null) {
            // Clear the input fields
            $('input[name="increment_amount"]').val('');
            $('input[name="performa_amount"]').val('');
            $('input[name="total_performa_amount"]').val('');
            $('input[name="basic"]').val('');
            $('input[name="gst"]').val('');
        } else {
            // Calculate GST, Performa, and Basic amounts
            var incrementAmount = (lastYearOrderValue * incrementPercentage) / 100;
            var performa = lastYearOrderValue + incrementAmount;
            var basic = (performa * 100) / 118;
            var gst = performa - basic;

            // Update the input fields with the calculated values
            $('input[name="increment_amount"]').val(Math.round(incrementAmount));
            $('input[name="performa_amount"]').val(Math.round(performa));
            $('input[name="total_performa_amount"]').val(Math.round(performa));
            $('input[name="basic"]').val(Math.round(basic));
            $('input[name="gst"]').val(Math.round(gst));

        }
    }
});



$(document).ready(function () {
// Function to clear the related fields
    function clearCustomerDetailsFields() {
        $('input[name="customer_name"]').val('');
        $('textarea[name="address_line_1"]').val('');
        $('textarea[name="address_line_2"]').val('');
        // Clear the "Type of AMC" dropdown as well
        $('#type_of_amc').empty();
    }

// Listen for changes in the customer select field
    $('select[name="customer_id_no"]').change(function () {
        var customerId = $(this).val();
        
        if (customerId === '') {
            // Clear the fields when nothing is selected
            clearCustomerDetailsFields();
            return; // Exit the function
        }
        
        // Get the CSRF token value
        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        
        // Prepare data to send in the Ajax request
        var requestData = {
            _token: csrfToken,
            customerId: customerId
        };
        
        // Make an Ajax request to fetch customer details
        $.ajax({
            url: '{{ route('admin.tapl.customer.fetch') }}', // Use the named route
            type: 'GET',
            data: requestData,
            dataType: 'json',
            success: function (data) {
                // Update the customer details fields
                $('input[name="customer_name"]').val(data.customer_name);
                $('textarea[name="address_line_1"]').val(data.address_line_1);
                $('textarea[name="address_line_2"]').val(data.address_line_2);
                $('input[name="number_of_contracts"]').val(data.total_contract);
                
                 // Update the "Type of AMC" field based on the selected option
            var typeOfAMCField = $('#type_of_amc');
            typeOfAMCField.empty();

            $.each(data.type_of_amc_options, function (key, value) {
                typeOfAMCField.append('<option value="' + key + '">' + value + '</option>');
            });

            // Determine the value and display text for "Type of AMC" based on the selected option
            var selectedTypeOfAMC = typeOfAMCField.val();
            var typeOfAMCText = '';

            if (selectedTypeOfAMC === '1') {
                typeOfAMCText = 'AMC';
            } else if (selectedTypeOfAMC === '2') {
                typeOfAMCText = 'Blue Starr';
            }

            // Update the input field with the determined text
            $('input[name="type_of_amc"]').val(typeOfAMCText);
            },
            error: function () {
                // Handle errors here
                clearCustomerDetailsFields(); // Clear the fields on error
            }
        });
    });

// Optional: Checkbox to copy Address Line 1
    $('#copy_address_checkbox').change(function () {
        if ($(this).is(':checked')) {
            var addressLine1Value = $('textarea[name="address_line_1"]').val();
            $('textarea[name="address_line_2"]').val(addressLine1Value);
        }
    });
});

$(document).ready(function() {

    $('input[name="amc_starting_year"]').on('input', function () {
    // Remove non-numeric characters and leading zeros
    var year = $(this).val().replace(/\D/g, '').replace(/^0+/, '');
    
    // Ensure the year is within the allowed range
    if (year < 2000) {
        year = 2000;
    } else if (year > 2040) {
        year = 2040;
    }
    
    // Ensure the year is exactly 4 digits
    if (year.length > 4) {
        year = year.slice(0, 4);
    }
    
    // Update the input value
    $(this).val(year);
});

});

$(document).ready(function () {
    // function updateSLNo() {
    //     $('.data-row').each(function (index) {
    //         $(this).find('input[name$="[sl_no]"]').val(index + 1);
    //     });
    // }
    // $(document).on("click", ".add-row", function() {
    //     var $lastRow = $(".data-row:last");
    //     var $newRow = $lastRow.clone();
    //     updateMachineQuantity();

    //     // Increment the SL.No only for the new row
    //     var lastSlNo = parseInt($lastRow.find('input[name^="data["]').val());
    //     var newSlNo = isNaN(lastSlNo) ? 1 : lastSlNo + 1;

    //     // Set the incremented SL.No in the new row
    //     $newRow.find('input[name^="data["]').val(newSlNo);

    //     // Clear input values in all other fields of the new row
    //     $newRow.find('input[name!="data[' + newSlNo + '][sl_no]"]').val('');

    //     // Update input field names to use the next index
    //     $newRow.find("input").each(function(index, element) {
    //         var currentName = $(element).attr("name");
    //         var newName = currentName.replace(/\[(\d+)\]/g, "[" + newSlNo + "]");
    //         $(element).attr("name", newName);
    //     });

    //     $lastRow.after($newRow);
    // });

    // $(document).on("click", ".add-row", function() {
    //     var $lastRow = $(".data-row:last");
    //     var $newRow = $lastRow.clone();

    //     // Increment the SL.No for the new row
    //     var lastSlNo = parseInt($lastRow.find('input[name$="[sl_no]"]').val());
    //     var newSlNo = isNaN(lastSlNo) ? 1 : lastSlNo + 1;
    //     $newRow.find('input[name$="[sl_no]"]').val(newSlNo);

    //     // Clear input values in all fields of the new row
    //     $newRow.find('input').val('');

    //     $lastRow.after($newRow);

    //     updateSLNo();
    // });


    // $(document).on("click", ".add-row", function() {
    // updateSLNo();
    // var $lastRow = $(".data-row:last");
    // var $newRow = $lastRow.clone();
    // updateMachineQuantity();

    // // Increment the SL.No only for the new row
    // var lastSlNoInput = $lastRow.find('input[name^="data["][name$="[sl_no]"]');
    // var lastSlNo = parseInt(lastSlNoInput.val());
    // var newSlNo = isNaN(lastSlNo) ? 1 : lastSlNo + 1;

    // // Set the incremented SL.No in the new row
    // $newRow.find('input[name^="data["][name$="[sl_no]"]').val(newSlNo);

    // // Clear input values in all other fields of the new row
    // $newRow.find('input[name!="data[' + newSlNo + '][sl_no]"]').val('');

    // // Update input field names to use the next index
    // $newRow.find("input").each(function(index, element) {
    //     var currentName = $(element).attr("name");
    //     var newName = currentName.replace(/\[(\d+)\]/g, "[" + newSlNo + "]");
    //     $(element).attr("name", newName);
    // });

    // $lastRow.after($newRow);
// });
         

    // Delete a row
    // $(document).on("click", ".delete-row", function() {
    //     var rowCount = $(".data-row").length;
    //     if (rowCount > 1) {
    //         $(this).closest(".data-row").remove();
    //         updateMachineQuantity(); 


    //         // Update input field names to match the updated row indexes
    //         $(".data-row").each(function(index, row) {
    //             $(row).find("input").each(function(i, element) {
    //                 var currentName = $(element).attr("name");
    //                 var newName = currentName.replace(/\[(\d+)\]/g, "[" + index + "]");
    //                 $(element).attr("name", newName);
    //             });
    //             if (rowCount > 1) {
    //                 $row.remove();

    //                 // Update the SL.No for all rows after removing
    //                 updateSLNo();
    //             }
    //         });
    //     }
    // });

//     $(document).on("click", ".delete-row", function() {
//     var rowCount = $(".data-row").length;
//     if (rowCount > 1) {
//         var $row = $(this).closest(".data-row");
//         $row.remove();
        
//         // Update input field names to match the updated row indexes
//         $(".data-row").each(function(index, row) {
//             $(row).find("input").each(function(i, element) {
//                 var currentName = $(element).attr("name");
//                 var newName = currentName.replace(/\[(\d+)\]/g, "[" + index + "]");
//                 $(element).attr("name", newName);
//             });
//         });

//         // Update the SL.No for all rows after removing
//         updateSLNo();
//     }
// });

});


$(document).ready(function () {
    function updateSLNo() {
        $('.data-row').each(function (index) {
            $(this).find('input[name$="[sl_no]"]').val(index + 1);

            // Update the data index in the name attribute
            $(this).find('input').each(function () {
                var currentName = $(this).attr('name');
                var newName = currentName.replace(/\[\d+\]/g, '[' + index + ']');
                $(this).attr('name', newName);
            });
        });
    }

    $(document).on("click", ".add-row", function () {
        var $lastRow = $(".data-row:last");
        var $newRow = $lastRow.clone();

        // Increment the SL.No for the new row
        var lastSlNo = parseInt($lastRow.find('input[name$="[sl_no]"]').val());
        var newSlNo = isNaN(lastSlNo) ? 1 : lastSlNo + 1;
        $newRow.find('input[name$="[sl_no]"]').val(newSlNo);

        // Clear input values in all fields of the new row
        $newRow.find('input').val('');

        $lastRow.after($newRow);

        updateSLNo();
    });

    $(document).on("click", ".delete-row", function () {
        var rowCount = $(".data-row").length;
        if (rowCount > 1) {
            var $row = $(this).closest(".data-row");
            $row.remove();

            // Update the SL.No and input field names for all rows after removing
            updateSLNo();
        }
    });
});





$("#saveButton").click(function () {
    // Remove any existing error messages
    $(".text-danger").text('');

    // Perform client-side validation
    var isValid = true;

    function validateInput(inputId, errorMessage, shouldCheckAlphanumeric) {
        var value = $(inputId).val();
        var errorId = inputId + "_error"; // Compute the error element's ID
        var alphanumericRegex = /^[a-zA-Z0-9]+$/; // Regular expression for alphanumeric (letters and numbers) with no spaces

        if (!value) {
            $(errorId).text(errorMessage);
            isValid = false;
        } else if (shouldCheckAlphanumeric && !alphanumericRegex.test(value)) {
            $(errorId).text("Invalid " + errorMessage.toLowerCase());
            isValid = false;
        }
    }

    // Validate Name with alphanumeric check
    // validateInput("#performa_invoice_no", "Alphanumeric value required, no spaces allowed.", true);

    // Validate another field without alphanumeric check
    // validateInput("#other_field_id", "This field is required.", false);

    // Submit the form if no errors
    if (isValid) {
        // Add your form submission logic here
        $("#tapl-form").submit(); // This submits the form with id "staff-form"
    }

    // Return whether the form is valid
    return isValid;
});


$(document).ready(function () {
    // Find the input elements by their names
    var performaInvoiceInput = $("input[name='performa_invoice_no']");
    var systemCustomerNoInput = $("input[name='system_contract_id_no']");
    var customerIdInput = $("input[name='customer_id_no']");

    // Attach blur event listeners and validation for Performa Invoice No
    performaInvoiceInput.blur(function () {
        validateAlphanumeric(this, "#performa_invoice_no_error");
    });

    // Attach blur event listeners and validation for System Customer ID No
    systemCustomerNoInput.blur(function () {
        validateAlphanumeric(this, "#system_contract_id_no_error");
    });

    // Attach blur event listeners and validation for Customer ID No
    customerIdInput.blur(function () {
        validateAlphanumeric(this, "#customer_id_no_error");
    });

    // Function to validate alphanumeric input
    function validateAlphanumeric(inputElement, errorElementId) {
        var inputValue = $(inputElement).val();
        var alphanumericRegex = /^[a-zA-Z0-9]+$/; // Regular expression for alphanumeric (letters and numbers) with no spaces

        // Check if the input is empty
        if (!inputValue) {
            $(errorElementId).text("This field is required.");
            return;
        }

        // Check if the input matches the alphanumeric pattern
        if (!alphanumericRegex.test(inputValue)) {
            $(errorElementId).text("Invalid alphanumeric format. No spaces allowed.");
        } else {
            $(errorElementId).text(""); // Clear the error message if the input is valid
        }
    }
});


$(document).ready(function () {
    $("#copy_address_checkbox").change(function () {
        if ($(this).is(":checked")) {
            var addressLine1Value = $("#address_line_1").val();
            $("#address_line_2").val(addressLine1Value);
        } else {
            $("#address_line_2").val(""); // Clear Address Line 2 if the checkbox is unchecked
        }
    });
});

// Function to update the Machine Quantity based on the sum of qty values
function updateMachineQuantity() {
    var totalQty = 0;
    var totalTonage = 0;

    $(".data-row").each(function(index, row) {
        var qty = parseInt($(row).find(".qty").val()) || 0;
        var ton = parseInt($(row).find(".ton").val()) || 0;
        totalQty += qty;
    });

    $("#machine_quantity").val(totalQty);


}


updateMachineQuantity();

// function updateTonnageTotal() {
//     var totalQty = parseInt($("#machine_quantity").val()) || 0;
//     var totalTonage = parseInt($("#machine_tonnage").val()) || 0;

//     var totalTonageResult = totalQty * totalTonage;
//     console.log('totalQty: ' + totalQty);
//     console.log('totalTonage: ' + totalTonage);
//     console.log('totalTonageResult: ' + totalTonageResult);
//     $("#total_machine_tonnage").val(totalTonageResult);
// }

// updateTonnageTotal();

function updateMachineTonnage() {
        var totalTon = 0;
        var totalTonnage = 0;
        var totalQty = 0;

        $(".data-row").each(function(index, row) {
            var product = Number($(row).find(".ton").val()) || 0;
            var qty = Number($(row).find(".qty").val()) || 0;
            totalTonnage +=  product * qty;
            totalQty += qty;
        });
        // Update the Machine Tonnage input field
            $("#machine_tonnage").val(totalTonnage);
            $("#machine_quantity").val(totalQty);

        }

    updateMachineTonnage();


// $(document).on("keyup", ".ton", updateMachineTonnage);
// $(document).on("keyup", ".qty", updateMachineQuantity);
$(document).on("keyup", ".ton", updateMachineTonnage);
$(document).on("keyup", ".qty", updateMachineTonnage);




</script>


@endsection