@extends('layouts/contentNavbarLayout')

@section('title', 'Generate Invoices')

@section('content')
<h4 class="py-3 mb-4"><span class="text-muted fw-light">Home /</span>Generate Invoice</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' => ['generate-invoices.update', Crypt::encrypt($invoice->id)], 'method' => 'put', 'class' => 'p-4 progress-form', 'id' => 'progress-form', 'files' => true]) !!}
        @else
          {!! Form::open(['url' => '/generate-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', 'placeholder' => 'Invoice Number']) !!}
                  </div>

                  <div class="col-sm-6">
                      {!! Form::label('issue_date', 'Date of Issue', ['class' => 'form-label']) !!}
                      {!! Form::date('issue_date', @$invoice->issue_date ? $invoice->issue_date : \Carbon\Carbon::now(), ['class' => 'form-control']) !!}
                  </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']) !!}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md">
            <div class="card mb-4">
              <h5 class="card-header">Resident Billing Information</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-sm-12">
                    {!! Form::label('resident_id', 'Resident Name/ID', ['class' => 'form-label']) !!}
                    {!! Form::select('resident_id', $residents, @$invoice->resident_id, ['class' => 'form-select form-select-lg', 'placeholder' => 'Select Resident Name/ID', 'id'=>'resident_id', 'onchange' => "getResidentDetails()"]) !!}
                  </div>
                </div>

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

                <div class="row">
                  <div class="col-sm-6">
                    {!! Form::label('email', 'Email Address', ['class' => 'form-label']) !!}
                    {!! Form::email('email', @$inovice->email, ['class' => 'form-control', 'placeholder' => 'jhon@xyz.com']) !!}
                  </div>
                </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-5">
                          {!! 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-3">
                          {!! 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-3">
                          {!! 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-5">
                        {!! Form::label('description', 'Description', ['class' => 'form-label']) !!}
                        {!! Form::textarea('invoice_items[description][]', '', ['class' => 'form-control', 'id' => 'description', 'rows'=>'2']) !!}
                    </div>
                    <div class="col-sm-3">
                        {!! 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-3">
                        {!! Form::label('total', 'Total', ['class' => 'form-label']) !!}
                        {!! Form::number('invoice_items[total][]',  0, ['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-5">
                            {!! Form::label('description[]', 'Description', ['class' => 'form-label']) !!}
                            {!! Form::textarea('invoice_items[description][]', '', ['class' => 'form-control', 'rows'=>'2']) !!}
                        </div>
                        <div class="col-sm-3">
                            {!! 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-3">
                            {!! 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']) !!}
                    {!! Form::textarea('notes', @$invoice->notes, ['class' => 'form-control', 'id' => 'note']) !!}
                  </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);
    }

    function getResidentDetails() {
      var resident_id = $("#resident_id").val();
      $.ajax({
        url: '/resident-getdata/'+resident_id,
        type: 'GET',
        success: function(data) {
          $("#street").val(data.street);
          $("#city").val(data.city);
          $("#state").val(data.state);
          $("#zip_code").val(data.zip_code);

        },
        error: function(error) {
            alert('Error:'+ JSON.stringify(error.responseJSON.error));
        }
    });
    }

    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 = 1;
        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