@extends('layouts/contentNavbarLayout')

@section('title', 'Invoices')

@section('content')
<h4 class="py-3 mb-4"><span class="text-muted fw-light">Home /</span> Invoice Create</h4>
<!-- Basic Layout & Basic with Icons -->
<div class="row">
  <!-- Basic Layout -->
  <div class="col-xxl">
    <div class="card mb-4">
      <div class="d-flex justify-content-between align-items-center flex-wrap mt-2 mb-1">
        <h5 class="m-0 me-2"></h5>
        <div class="mx-3">
          <a class="fw-medium btn btn-warning" href="/invoices">
            Back </a>
        </div>
      </div>

      @isset($invoice)
        {!! Form::model($invoice, ['route' => ['invoices.update', Crypt::encrypt($invoice->id)], 'method' => 'put', 'class' => 'p-4 progress-form', 'id' => 'progress-form', 'files' => true]) !!}
      @else
        {!! Form::open(['url' => '/invoices', 'class' => 'p-4 progress-form', 'id' => 'progress-form', 'lang' => 'en', 'files' => true]) !!}
      @endisset

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Invoice Creation</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-6">
                      {!! Form::label('invoice_no', 'Invoice Number', ['class' => 'form-label']) !!}
                      {!! Form::text('invoice_no', @$invoice_no, ['class' => 'form-control', 'readonly', 'id' => 'invoice_no', 'placeholder' => 'Invoice Number']) !!}
                  </div>

                  <div class="col-sm-6">
                      {!! Form::label('community_id', 'Community Name', ['class' => 'form-label']) !!}
                      {!! Form::select('community_id', $communities, @$invoice->community_id, ['class' => 'form-select form-select-lg', 'id' => 'community_id']) !!}
                  </div>

                  <div class="col-sm-6">
                      {!! Form::label('issue_date', 'Date of Issue', ['class' => 'form-label']) !!}
                      {!! Form::date('issue_date', @$invoice->issue_date, ['class' => 'form-control', 'id' => 'issue_date']) !!}
                  </div>

                  <div class="col-sm-6">
                      {!! Form::label('due_date', 'Due Date', ['class' => 'form-label']) !!}
                      {!! Form::date('due_date', @$invoice->due_date, ['class' => 'form-control', 'id' => 'due_date']) !!}
                  </div>
                </div>

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

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Billing Details</h5>
              <div class="card-body">
                <div class="col-sm-12">
                  {!! Form::label('resi_comp_name', 'Resident/Company Name', ['class' => 'form-label']) !!}
                  {!! Form::text('resi_comp_name', @$invoice->resi_comp_name, ['class' => 'form-control', 'id' => 'resi_comp_name', 'placeholder' => 'Resident/Company Name']) !!}
                </div>

                <div class="row form__field">
                    {!! Form::label('address', 'Address', ['class' => 'col-sm-12 col-form-label']) !!}
                    <div class="col-sm-4">
                        {!! Form::label('street', 'Street', ['class' => 'col-sm-2']) !!}
                        {!! Form::text('street', @$invoice->street, ['class' => 'form-control', 'placeholder' => 'Street', 'required']) !!}
                    </div>
                    <div class="col-sm-4">
                        {!! Form::label('city', 'City', ['class' => 'col-sm-2']) !!}
                        {!! Form::text('city', @$invoice->city, ['class' => 'form-control', 'placeholder' => 'New York City', 'required']) !!}
                    </div>
                    <div class="col-sm-4">
                        {!! Form::label('state', 'State', ['class' => 'col-sm-2']) !!}
                        {!! Form::text('state', @$invoice->state, ['class' => 'form-control', 'placeholder' => 'Alaska', 'required']) !!}
                    </div>
                    <div class="col-sm-4 mt-3">
                        {!! Form::label('zip', 'Zip', ['class' => 'col-sm-2']) !!}
                        {!! Form::text('zip', @$invoice->zip, ['class' => 'form-control', 'placeholder' => 'XP12DK3', 'required']) !!}
                    </div>
                </div>

                <div class="col-sm-6">
                    {!! Form::label('email', 'Email Address', ['class' => 'form-label']) !!}
                    {!! Form::email('email', @$invoice->email, ['class' => 'form-control', 'placeholder' => 'jhon@xyz.com', 'inputmode' => 'email']) !!}
                </div>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Invoice Items &nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" id="addRow" class="btn btn-primary" style="width: 100 px;">+ Item</button>
              </h5>
                <div class="card-body">
                  @if (@$invoice)
                    @foreach (@$invoice->invoice_items['description'] as $index => $description)
                      <div class="row">
                        <div class="col-sm-4">
                            {!! Form::label('description', 'Description', ['class' => 'form-label']) !!}
                            {!! Form::textarea('invoice_items[description][]', @$invoice->invoice_items['description'][$index], ['class' => 'form-control', 'id' => 'description', 'rows'=>'2']) !!}
                        </div>
                        <div class="col-sm-2">
                            {!! Form::label('quantity', 'Quantity', ['class' => 'form-label']) !!}
                            {!! Form::number('invoice_items[quantity][]', @$invoice->invoice_items['quantity'][$index], ['class' => 'form-control ', 'onchange' => "changeTotal(this)", 'id' => 'quantity']) !!}
                        </div>
                        <div class="col-sm-2">
                            {!! Form::label('price', 'Price', ['class' => 'form-label']) !!}
                            {!! Form::number('invoice_items[price][]', @$invoice->invoice_items['price'][$index], ['class' => 'form-control', 'onchange' => "changeTotal(this)", 'id' => 'price']) !!}
                        </div>
                        <div class="col-sm-2">
                            {!! Form::label('total', 'Total', ['class' => 'form-label']) !!}
                            {!! Form::number('invoice_items[total][]',  @$invoice->invoice_items['total'][$index], ['class' => 'form-control', 'readonly', 'id' => "total"]) !!}
                        </div>
                      </div>
                    @endforeach
                  @else
                    <div class="row">
                      <div class="col-sm-4">
                          {!! Form::label('description', 'Description', ['class' => 'form-label']) !!}
                          {!! Form::textarea('invoice_items[description][]', null, ['class' => 'form-control', 'id' => 'description', 'rows'=>'2']) !!}
                      </div>
                      <div class="col-sm-2">
                          {!! Form::label('quantity', 'Quantity', ['class' => 'form-label']) !!}
                          {!! Form::number('invoice_items[quantity][]', null, ['class' => 'form-control ', 'onchange' => "changeTotal(this)", 'id' => 'quantity']) !!}
                      </div>
                      <div class="col-sm-2">
                          {!! Form::label('price', 'Price', ['class' => 'form-label']) !!}
                          {!! Form::number('invoice_items[price][]', null, ['class' => 'form-control', 'onchange' => "changeTotal(this)", 'id' => 'price']) !!}
                      </div>
                      <div class="col-sm-2">
                          {!! Form::label('total', 'Total', ['class' => 'form-label']) !!}
                          {!! Form::number('invoice_items[total][]', null, ['class' => 'form-control', 'readonly', 'id' => "total"]) !!}
                      </div>
                    </div>
                  @endif


                <div id="invoiceItemsContainer">
                  <!-- Dynamic Rows Will Be Added Here -->
                </div>

                  <script id="invoiceItemTemplate" type="text/template">
                    <div class="row align-items-end">
                        <div class="col-sm-4">
                            {!! Form::label('description[]', 'Description', ['class' => 'form-label']) !!}
                            {!! Form::textarea('invoice_items[description][]', "", ['class' => 'form-control', 'rows'=>'2']) !!}
                        </div>
                        <div class="col-sm-2">
                            {!! Form::label('quantity[]', 'Quantity', ['class' => 'form-label']) !!}
                            {!! Form::number('invoice_items[quantity][]', 0, ['class' => 'form-control', 'onchange' => "changeTotal(this)", 'id' => 'quantity']) !!}
                        </div>
                        <div class="col-sm-2">
                            {!! Form::label('price[]', 'Price', ['class' => 'form-label']) !!}
                            {!! Form::number('invoice_items[price][]', 0, ['class' => 'form-control', 'onchange' => "changeTotal(this)", 'id' => 'price']) !!}
                        </div>
                        <div class="col-sm-2">
                            {!! Form::label('total[]', 'Total', ['class' => 'form-label']) !!}
                            {!! Form::number('invoice_items[total][]', 0, ['class' => 'form-control', 'readonly', 'id' => "total"]) !!}
                        </div>
                        <div class="col-sm-1">
                          <button type="button" class="btn btn-danger removeRow">-</button>
                        </div>
                    </div>
                  </script>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Payment Details</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-3">
                    {!! Form::label('late_fees', 'Late Fee', ['class' => 'form-label']) !!}
                    {!! Form::number('late_fees', @$invoice->late_fees ? $invoice->late_fees : 0, ['class' => 'form-control', 'onchange' => "changeFianlTotal()"]) !!}
                  </div>
                  <div class="col-sm-3">
                      {!! Form::label('sub_total', 'Subtotal', ['class' => 'form-label']) !!}
                      {!! Form::number('sub_total', @$invoice->sub_total, ['class' => 'form-control', 'id' => 'sub_total', 'readonly']) !!}
                  </div>
                  <div class="col-sm-3">
                      {!! Form::label('taxes', 'Taxes(7%)', ['class' => 'form-label']) !!}
                      {!! Form::number('taxes', @$invoice->taxes, ['class' => 'form-control', 'id' => 'taxes', 'onchange' => "changeTotal()", 'readonly']) !!}
                  </div>
                  <div class="col-sm-3">
                      {!! Form::label('total_amount', 'Total Amount Due', ['class' => 'form-label']) !!}
                      {!! Form::number('total_amount', @$invoice->total_amount, ['class' => 'form-control', 'id' => 'total_amount', 'readonly']) !!}
                  </div>
                </div>

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

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Invoice Notes</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-12">
                      {!! Form::label('notes', 'Notes', ['class' => 'form-check-label', 'for' => 'notes']) !!}
                      {!! Form::textarea('notes', @$invoice->notes, ['class' => 'form-control', 'id' => 'notes']) !!}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="d-flex justify-center sm:justify-end mt-4 sm:mt-5 float-end">

            <!-- Assuming you want to clear the form with JavaScript -->
            <button type="button" class="fw-medium btn btn-warning" style="margin-right: 10px" onclick="clearForm()">Clear</button>

            <!-- This button is for submitting the form -->
            {!! Form::button('Submit', ['type' => 'submit', 'class' => 'btn btn-primary']) !!}

          </div>

        {!! Form::close() !!}
    </div>
  </div>
</div>
@endsection

@section('page-script')
  <script>

    function changeFianlTotal() {
      var total_amount = 0;
      var late_fees = $("#late_fees").val();

      var taxes = parseFloat((parseFloat($("#sub_total").val()) + parseFloat(late_fees))*7/100);
      $("#sub_total").val(parseFloat($("#sub_total").val()) + parseFloat(late_fees));
      $("#taxes").val(taxes);

      total_amount = parseFloat($("#sub_total").val()) + taxes;
      $("#total_amount").val(total_amount);
    }

    document.addEventListener('DOMContentLoaded', function () {
        let container = document.getElementById('invoiceItemsContainer');
        let template = document.getElementById('invoiceItemTemplate').innerHTML;

        document.getElementById('addRow').addEventListener('click', function () {
            container.insertAdjacentHTML('beforeend', template);
            updateRowHandlers();
        });

        function updateRowHandlers() {
            document.querySelectorAll('.removeRow').forEach(button => {
                button.addEventListener('click', function () {
                    this.parentNode.parentNode.remove();
                });
            });
        }

    });

    function changeTotal(element) {
          // Find the closest parent row of the changed element
          let row = element.closest('.row');

          // Get the quantity and price from the same row
          let quantity = row.querySelector('[name="invoice_items[quantity][]"]').value;
          let price = row.querySelector('[name="invoice_items[price][]"]').value;

          // Calculate the total for the row
          let total = quantity * price;

          // Set the total in the total input field
          row.querySelector('[name="invoice_items[total][]"]').value = total.toFixed(2); // toFixed(2) for two decimal places

          // Update the grand total
          updateGrandTotal();
      }

        // Function to calculate and update the grand total
        function updateGrandTotal() {
            let grandTotal = 0;

            // Loop through all total input fields and sum their values
            document.querySelectorAll('[name="invoice_items[total][]"]').forEach(function(input) {
                let rowTotal = parseFloat(input.value) || 0;
                grandTotal += rowTotal;
            });
            // Update the grand total display
            document.getElementById('sub_total').value = grandTotal.toFixed(2);

            changeFianlTotal();
        }
  </script>
@endsection