@extends('layouts/layoutMaster')

@section('title', 'View Proposals')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Vendor Styles -->
    @section('vendor-style')
    @vite([
        'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
        'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
        'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
        'resources/assets/vendor/libs/select2/select2.scss',
        'resources/assets/vendor/libs/@form-validation/form-validation.scss',
        'resources/assets/vendor/libs/animate-css/animate.scss',
        'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss',
        'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
        'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.scss',
        'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.scss',
        'resources/assets/vendor/libs/jquery-timepicker/jquery-timepicker.scss',
        'resources/assets/vendor/libs/pickr/pickr-themes.scss'
    ])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
    @vite([
        'resources/assets/vendor/libs/autosize/autosize.js',
        'resources/assets/vendor/libs/moment/moment.js',
        'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
        'resources/assets/vendor/libs/select2/select2.js',
        'resources/assets/vendor/libs/@form-validation/popular.js',
        'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
        'resources/assets/vendor/libs/@form-validation/auto-focus.js',
        'resources/assets/vendor/libs/cleavejs/cleave.js',
        'resources/assets/vendor/libs/cleavejs/cleave-phone.js',
        'resources/assets/vendor/libs/sweetalert2/sweetalert2.js',
        'resources/assets/vendor/libs/moment/moment.js',
        'resources/assets/vendor/libs/flatpickr/flatpickr.js',
        'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js',
        'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js',
        'resources/assets/vendor/libs/jquery-timepicker/jquery-timepicker.js',
        'resources/assets/vendor/libs/pickr/pickr.js'
    ])
@endsection

@section('page-script')
@vite(['resources/assets/js/forms-pickers.js'])
@endsection

@section('content')
    <!-- Site List Table -->
    <div class="card mb-6">
      <h5 class="card-header">{{ isset($proposal) ? 'View Proposal' : 'Proposal' }}</h5>
        <form class="card-body" id="proposal_form" action="{{ isset($proposal) ? route('proposal-list.update', $proposal->id) : route('proposal-list.store') }}" method="POST">
          @csrf
          @if(isset($proposal))
              @method('PUT')
          @endif
          <div class="container">
            <div class="row g-6">
                <!-- Left Side -->
                <div class="col-md-6">
                    <div class="left-side">
                      <div class="row g-6">
                        <div class="col-md-12">
                            <div class="form-floating form-floating-outline">
                                <input type="hidden" name="proposal_id" value="{{ $proposal->id }}">
                                <select name="type" id="type" class="form-select select2" placeholder="Select Type" data-allow-clear="true" onchange="toggleDropdowns()" disabled>
                                    <option value="">Select Type</option>
                                    <option value="Lead" {{ ($proposal->type ?? '') == 'Lead' ? 'selected' : '' }}>Lead</option>
                                    <option value="Customer" {{ ($proposal->type ?? '') == 'Customer' ? 'selected' : '' }}>Customer</option>
                                </select>
                                <label for="type">Type</label>
                            </div>
                        </div>
                      </div>

                      <br>
                        <div class="row g-6">
                          <!-- Lead Dropdown -->
                          <div class="col-md-12" id="lead-section">
                              <div class="form-floating form-floating-outline">
                                  <select name="Lead_id_n" id="Lead_id_n" class="form-select select2" placeholder="Select Lead" data-allow-clear="true" disabled>
                                      <option value="">Select Lead</option>

                                      @foreach ($leads as $lea)
                                          <option {{ ($proposal->Lead_id_n ?? '') == $lea->id ? 'selected' : '' }} value="{{ $lea->id }}" data-state="{{ $lea->state }}" data-source="{{ $lea->source_id }}" data-status="{{ $lea->status_id }}" data-address="{{ $lea->address }}" data-email="{{ $lea->email }}" data-phone="{{ $lea->phone }}">{{ $lea->name }}</option>
                                      @endforeach
                                  </select>
                                  <label for="Lead_id_n">Lead</label>
                              </div>
                          </div>

                          <!-- Dealer Dropdown -->
                          <div class="col-md-12" id="dealer-section">
                              <div class="form-floating form-floating-outline">
                                  <select name="dealer_id" id="dealer_id" class="form-select select2" placeholder="Select Dealer" data-allow-clear="true" disabled>
                                      <option value="">Select Dealer</option>
                                      @foreach ($Dealers as $deale)
                                          <option {{ ($proposal->dealer_id ?? '') == $deale->id ? 'selected' : '' }} value="{{ $deale->id }}" data-state="{{ $deale->state }}" data-address="{{ $deale->office_address }}" data-email="{{ $deale->email }}" data-phone="{{ $deale->phone_no }}">{{ $deale->name }}</option>
                                      @endforeach
                                  </select>
                                  <label for="deale_id">Dealer</label>
                              </div>
                          </div>
                        </div>
                        <br>
                        <div class="row g-6">
                            <div class="col-md-6">
                                <div class="form-floating form-floating-outline">
                                    <input type="date" id="date" name="date" class="form-control" placeholder="Date" value="{{ old('date', $proposal->date ?? '') }}">
                                    <label for="date">Date</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating form-floating-outline">
                                    <input type="date" id="open_till" name="open_till" class="form-control" placeholder="Open Till" value="{{ old('open_till', $proposal->open_till ?? '') }}">
                                    <label for="open_till">Open Till</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Side -->
                <div class="col-md-6">
                    <div class="right-side">
                        <div class="row g-6">
                            <div class="col-md-6">
                                <div class="form-floating form-floating-outline">
                                    <select name="status_id" id="status_id" class="form-select select2" placeholder="Select Status" data-allow-clear="true">
                                        <option>Select Status</option>
                                        @foreach ($status as $stat)
                                            <option {{ ($proposal->status_id ?? '') == $stat->id ? 'selected' : '' }} value="{{ $stat->id }}">
                                                {{ $stat->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <label for="status_id">Status</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating form-floating-outline">
                                    <select name="source_id" id="source_id" class="form-select select2" placeholder="Select Source" data-allow-clear="true">
                                        <option>Select Source</option>
                                        @foreach ($source as $sourc)
                                            <option {{ ($proposal->source_id ?? '') == $sourc->id ? 'selected' : '' }} value="{{ $sourc->id }}">{{ $sourc->name }}</option>
                                        @endforeach
                                    </select>
                                    <label for="source_id">Source</label>
                                </div>
                            </div>
                        </div>
                        <br>
                        @php
                          if(!empty($dealer)){
                            $data = $dealer;
                          } else {
                            $data = $lead;
                          }
                        @endphp
                        {{-- {{ dd($data) }} --}}
                        <div class="row g-6">
                            <div class="col-md-12">
                                <div class="form-floating form-floating-outline">
                                    <input type="text" id="to" name="to" class="form-control" placeholder="To" value="{{ $data->name }}" readonly>
                                    <label for="to">To</label>
                                </div>
                            </div>
                        </div>
                        <br>
                        {{-- {{ dd($lead); }} --}}
                        <div class="row g-6">
                            <div class="col-md-12">
                                <div class="form-floating form-floating-outline">
                                    <textarea name="address" id="address" class="form-control" placeholder="Address" readonly>{{ $data->address ?? $data->office_address }}</textarea>
                                    <label for="address">Address</label>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="row g-6">
                            <div class="col-md-6">
                                <div class="form-floating form-floating-outline">
                                    <input type="text" name="email" id="email" class="form-control" placeholder="Email" value="{{ $data->email ?? '' }}" readonly>
                                    <label for="email">Email</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating form-floating-outline">
                                    <input type="text" name="phone" id="phone" class="form-control" placeholder="Phone" value="{{ $data->phone ?? $data->phone_no }}" readonly>
                                    <label for="phone">Phone</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            {{-- {{ dd($products) }} --}}
            <div class="row g-6">
              {{-- <div class="col-md-6">
                  <div class="form-floating form-floating-outline">
                      <select name="product_id" id="product_id" class="form-select select2" placeholder="Select Product" data-allow-clear="true">
                          <option value="">Select Product</option>
                          @foreach ($products as $product)
                              <option value="{{ $product->id }}" data-cgst="{{ $product->cgst }}" data-sgst="{{ $product->sgst }}" data-igst="{{ $product->igst }}" data-name="{{ $product->name }}">{{ $product->name }}</option>
                          @endforeach
                      </select>
                      <label for="product_id">Product</label>
                  </div>
              </div> --}}
            </div>
            <br>
            <div class="card-datatable table-responsive">
              <table class="datatables-lead table" id="productTable">
                  <thead>
                      <tr>
                          <th>No</th>
                          <th>Product</th>
                          <th>Description</th>
                          <th>Quantity</th>
                          <th>Rate</th>
                          @if($data->state != 12)
                          <th>IGST</th>
                          @else
                          <th>CGST</th>
                          <th>SGST</th>
                          @endif
                          <th>Total</th>
                      </tr>
                  </thead>
                  <tbody>
                      @php $i = 1; @endphp
                      @foreach ($proposalItem as $items)
                      <tr>
                          <td style="width: 5%;">{{ $i++ }}</td>
                          <td style="width: 25%;">
                              {{ $items->product->name }}
                              <input type="hidden" name="proposal_item_ids[]" value="{{ $items->id }}">
                              <input type="hidden" name="product_ids[]" value="{{ $items->product_id }}">
                          </td>
                          <td style="width: 15%;">
                              <textarea name="descriptions[]" class="form-control" rows="2" placeholder="Enter description">{{ $items->descriptions }}</textarea>
                          </td>
                          <td style="width: 10%;">
                              <input type="number" name="quantities[]" class="form-control quantity" min="1" value="{{ $items->quantity }}">
                          </td>
                          <td style="width: 10%;">
                              <input type="number" name="rates[]" class="form-control rate" min="0" step="0.01" value="{{ $items->rates }}">
                          </td>
                          <input type="hidden" name="base_totals[]" class="form-control base-total" value="{{ $items->base_totals }}" readonly>
                          @if($items->sgst !== NULL)
                          <td style="width: 5%;">
                              <input type="hidden" name="cgst[]" class="form-control cgst" id="cgst" value="{{ $items->cgst }}" readonly>
                              <span class="cgst">{{ number_format($items->cgst, 2) }}</span>
                          </td>
                          <td style="width: 5%;">
                              <input type="hidden" name="sgst[]" class="form-control sgst" id="sgst" value="{{ $items->sgst }}" readonly>
                              <span class="sgst">{{ number_format($items->sgst, 2) }}</span>
                          </td>
                          @else
                          <td style="width: 10%;">
                              <input type="hidden" name="igst[]" class="form-control igst" id="igst" value="{{ $items->igst }}" readonly>
                              <span class="igst">{{ number_format($items->igst, 2) }}</span>
                          </td>
                          @endif

                          <td style="width: 10%;">
                              <input type="hidden" name="totals[]" class="form-control total" value="{{ $items->totals }}" readonly>
                              <span id="total">{{ number_format($items->totals, 2) }}</span>
                          </td>
                      </tr>
                      @endforeach
                  </tbody>
              </table>
              </div>

              <!-- Summary Section -->
              <div class="row mt-3">
                  <div class="col-md-6 ms-auto text-end">
                      <span><strong>Sub Total :</strong></span>
                      <input type="hidden" class="subtotal" name="subtotal" value="0">
                      <span id="subtotal">₹{{ number_format($proposal->subtotal,2) }}</span>
                  </div>
              </div>
              <hr>

              <div class="row mt-2">
                  <div class="col-md-4 ms-auto text-end">
                      <span><strong>Discount :</strong></span>
                      <span>
                          <input type="hidden" class="discount_value" name="discount_value" value="0">
                          <input type="number" id="discount" name="discount" class="form-control d-inline w-25 text-end" min="0" max="100" step="0.01" value="{{ number_format($proposal->discount,2) }}"> %
                          <span id="discount_value">-₹{{ number_format($proposal->discount_value,2) }}</span>
                      </span>
                  </div>
              </div>
              <hr>

              <div class="row mt-2">
                  <div class="col-md-6 ms-auto text-end">
                      <input type="hidden" class="tax_total" name="tax_total" value="0">
                      <span><strong>Tax :</strong></span>
                      <span id="tax_total">₹{{ number_format($proposal->tax_total,2) }}</span>
                  </div>
              </div>
              <hr>

              <div class="row mt-2">
                  <div class="col-md-6 ms-auto text-end">
                      <input type="hidden" class="overall_total" name="overall_total" value="0">
                      <span><strong>Total :</strong></span>
                      <span id="overall_total"><strong>₹{{ number_format($proposal->overall_total,2) }}</strong></span>
                  </div>
              </div>
            <hr>


          </div>


          <div class="pt-6">
              <a href="{{ route('proposal.index') }}" class="btn btn-outline-secondary waves-effect">Cancel</a>
              <button type="submit" class="btn btn-primary me-4 waves-effect waves-light">{{ isset($proposal) ? 'Update' : 'Submit' }}</button>
          </div>
        </form>
    </div>

  <script>
   $(document).ready(function() {
            $('.select2').select2({
                dropdownParent: $('.container')
            });
        });
  </script>
<script>
  function toggleDropdowns() {
      let type = document.getElementById("type").value;
      // alert(type);
      let leadSection = document.getElementById("lead-section");
      let dealerSection = document.getElementById("dealer-section");

      if (type === "Lead") {
          leadSection.style.display = "block";
          dealerSection.style.display = "none";
      } else if (type === "Customer") {
          leadSection.style.display = "none";
          dealerSection.style.display = "block";
      } else {
          leadSection.style.display = "none";
          dealerSection.style.display = "none";
      }
  }

  // Call the function on page load to set the correct visibility
  toggleDropdowns();
</script>
<script>
  $(document).ready(function() {
    $("#type").change(function() {
        toggleDropdowns();
        // Clear right side form when type changes
        clearRightSideForm();
    });

    // Handle lead selection change
    $("#Lead_id_n").change(function() {
        let selectedOption = $(this).find(":selected");
        if (selectedOption.val()) {
            // Populate right side form with lead data
            $("#to").val(selectedOption.text());
            $("#address").val(selectedOption.data("address"));
            $("#email").val(selectedOption.data("email"));
            $("#phone").val(selectedOption.data("phone"));
            $("#status_id").val(selectedOption.data("status")).trigger('change');
            $("#source_id").val(selectedOption.data("source")).trigger('change');

            // Update tax fields based on lead state
            updateTaxFields(selectedOption.data("state"));
        }
    });

    // Handle dealer selection change
    $("#dealer_id").change(function() {
        let selectedOption = $(this).find(":selected");
        if (selectedOption.val()) {
            // Populate right side form with dealer data
            $("#to").val(selectedOption.text());
            $("#address").val(selectedOption.data("address"));
            $("#email").val(selectedOption.data("email"));
            $("#phone").val(selectedOption.data("phone"));

            // Update tax fields based on dealer state
            // updateTaxFields(selectedOption.data("state"));
        }
    });

    function clearRightSideForm() {
        $("#to").val("");
        $("#address").val("");
        $("#email").val("");
        $("#phone").val("");
        $("#status_id").val("").trigger('change');
        $("#source_id").val("").trigger('change');
    }

  });
</script>
<script>
$(document).on('input', '.quantity, .rate, #discount', function() {
    updateTotals();
});

function updateTotals() {
    let subtotal = 0;
    let discount = parseFloat($('#discount').val()) || 0;
    let overallTotal = 0;

    // Initialize total tax variable
    let totalTax = 0;

    $('tr').each(function() {
        let quantity = parseFloat($(this).find('.quantity').val()) || 0;
        let rate = parseFloat($(this).find('.rate').val()) || 0;
        let baseTotal = quantity * rate;

        // Update base total hidden field
        $(this).find('.base-total').val(baseTotal.toFixed(2));
        $(this).find('#base-total').text(baseTotal.toFixed(2));

        // Handling tax calculation for CGST, SGST, or IGST
        let cgst = parseFloat($(this).find('.cgst').val()) || 0;
        let sgst = parseFloat($(this).find('.sgst').val()) || 0;
        let igst = parseFloat($(this).find('.igst').val()) || 0;

        // Calculate total tax for the current row
        let rowTax = 0;
        if (cgst && sgst) {
            // If CGST and SGST are present
            rowTax = (cgst + sgst);
        } else if (igst) {
            // If IGST is present
            rowTax = igst;
        }

        // Calculate total including tax
        let total = baseTotal + (baseTotal * rowTax / 100);

        // Update the tax and total values for the current row
        $(this).find('#cgst').text(cgst.toFixed(2));
        $(this).find('#sgst').text(sgst.toFixed(2));
        $(this).find('#igst').text(igst.toFixed(2));
        $(this).find('.total').val(total.toFixed(2));
        $(this).find('#total').text(total.toFixed(2));

        // Update accumulated totals
        subtotal += baseTotal;
        totalTax += (baseTotal * rowTax / 100); // Sum of tax for all products
        overallTotal += total;
    });

    // Calculate discount amount
    let discountAmount = (subtotal * discount) / 100;

    // Final totals after discount
    let finalSubtotal = subtotal;
    let finalOverallTotal = finalSubtotal + totalTax - discountAmount;

    // Update the values in the UI
    $('.subtotal').val(finalSubtotal.toFixed(2));
    $('#subtotal').text('₹' + finalSubtotal.toFixed(2));

    $('.discount_value').val(discountAmount.toFixed(2));
    $('#discount_value').text('-₹' + discountAmount.toFixed(2));

    $('.tax_total').val(totalTax.toFixed(2));
    $('#tax_total').text('₹' + totalTax.toFixed(2));

    $('.overall_total').val(finalOverallTotal.toFixed(2));
    $('#overall_total').text('₹' + finalOverallTotal.toFixed(2));
}

</script>
@endsection