@extends('layouts.contentNavbarLayout')

@section('content')
<div class="container">
    <h2 class="mb-4">Proforma Invoices</h2>

    <button class="btn btn-primary mb-3" data-bs-toggle="offcanvas" data-bs-target="#createInvoiceCanvas">
        + Create Invoice
    </button>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>Invoice No</th>
                <th>Client</th>
                <th>Date</th>
                <th>Total</th>
                <th>Status</th>
                <th width="200">Actions</th>
            </tr>
        </thead>
        <tbody>
        @foreach($invoices as $invoice)
            <tr>
                <td>{{ $loop->iteration }}</td>
                <td>{{ $invoice->invoice_number }}</td>
                <td>{{ $invoice->client->name ?? 'N/A' }}</td>
                <td>{{ \Carbon\Carbon::parse($invoice->date)->format('d-m-Y') }}</td>
                <td>₹{{ number_format($invoice->total_amount, 2) }}</td>
                <td><span class="badge bg-secondary">{{ ucfirst($invoice->status) }}</span></td>
                <td>
                    <a href="{{ route('proforma-invoices.preview', $invoice->id) }}" class="btn btn-sm btn-outline-success"><span class="mdi mdi-printer-search"></span></a>
                    <a data-bs-toggle="offcanvas" data-bs-target="#editCanvas{{ $invoice->id }}" class="btn btn-sm btn-outline-warning"><span class="mdi mdi-file-edit-outline"></span></a>
                   {{--  <form action="{{ route('proforma-invoices.destroy', $invoice->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this invoice?');">
                        @csrf @method('DELETE')
                        <button class="btn btn-sm btn-outline-danger"><span class="mdi mdi-delete-outline"></span></button>
                    </form> --}}
                        <!-- Trigger Button -->
                        <button type="button" class="btn btn-primary open-missing-modal"
                        data-client-id="{{ $invoice->client_id }}"
                        data-invoice-id="{{ $invoice->id }}"
                        data-bs-toggle="modal"
                        data-bs-target="#missingItemsModal_{{ $invoice->client_id }}">
                        Add Missing
                    </button>
                    
                    <!-- Modal -->
                    <div class="modal fade" id="missingItemsModal_{{ $invoice->client_id }}" tabindex="-1" aria-labelledby="missingItemsModalLabel_{{ $invoice->client_id }}" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <form id="missingItemForm" method="POST" action="{{ route('proforma.missing.store') }}">
                                @csrf
                                <input type="hidden" name="proforma_invoice_id" value="{{ $invoice->id }}">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Add Missing Item or Designation</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                    
                                    <div class="modal-body">
                                        <input type="hidden" name="client_id" id="client_id_{{ $invoice->id }}" value="{{ $invoice->client_id }}">
                                        <div class="mb-3">
                                            <label for="itemType">Select Type</label>
                                            <select id="itemType_{{ $invoice->id }}" class="form-control type-select" name="type" required data-invoice-id="{{ $invoice->id }}">
                                                <option value="">-- Select Type --</option>
                                                <option value="module">Module</option>
                                                <option value="other">Other Item</option>
                                                <option value="designation">Designation</option>
                                            </select>
                                        </div>
                    
                                        <div id="itemFields_{{ $invoice->id }}" class="mt-3 item-fields"></div>
                                    </div>
                    
                                    <div class="modal-footer">
                                        <button type="submit" class="btn btn-primary">Save</button>
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    
                    <script>
                      document.addEventListener('DOMContentLoaded', function () {
                          const modules = @json($modules);  // Data from Blade
                          const designationsHtml = `@foreach($designations as $desig)<option value="{{ $desig->id }}">{{ $desig->name }}</option>@endforeach`;
                      
                          console.log('Modules from Blade:', modules);
                      
                          document.querySelectorAll('.type-select').forEach(typeSelect => {
                              const invoiceId = typeSelect.dataset.invoiceId;
                              const fieldsDiv = document.getElementById(`itemFields_${invoiceId}`);
                              const clientInput = document.getElementById(`client_id_${invoiceId}`);
                      
                              typeSelect.addEventListener('change', function () {
                                  const type = this.value;
                                  const itemIndex = 0;  // Set to 0 or make dynamic as needed
                                  let html = '';
                                  const selectedClientId = parseInt(clientInput.value);
                      
                                  // Correct filter: match client in module.activity
                                  const filteredModules = modules.filter(module => {
    const clientId = module.activity?.client;
    return parseInt(clientId) === parseInt(selectedClientId);
});

                      
                                  console.log(`Filtered Modules for Client ${selectedClientId}:`, filteredModules);
                      
                                  if (type === 'module') {
                                      let options = '<option value="">-- Select Module --</option>';
                                      filteredModules.forEach(module => {
                                          options += `<option value="${module.id}">${module.name}</option>`;
                                      });
                      
                                      html = `
                                          <div class="form-group mb-3">
                                              <label>Module</label>
                                              <select name="items[${itemIndex}][module_id]" class="form-control" required>
                                                  ${options}
                                              </select>
                                          </div>
                                          <div class="form-group mb-3">
                                              <label>Description</label>
                                              <input type="text" name="items[${itemIndex}][description]" class="form-control" required>
                                          </div>
                                          <input type="hidden" name="items[${itemIndex}][quantity]" value="1">
                                          <div class="form-group mb-3">
                                              <label>Rate</label>
                                              <input type="number" name="items[${itemIndex}][rate]" class="form-control" required>
                                          </div>
                                      `;
                                  } else if (type === 'other') {
                                      html = `
                                          <div class="form-group mb-3">
                                              <label>Custom Title</label>
                                              <input type="text" name="items[${itemIndex}][custom_module]" class="form-control" required>
                                          </div>
                                          <div class="form-group mb-3">
                                              <label>Description</label>
                                              <input type="text" name="items[${itemIndex}][description]" class="form-control" required>
                                          </div>
                                          <div class="form-group mb-3">
                                              <input type="hidden" name="items[${itemIndex}][quantity]" class="form-control" value="1" required>
                                          </div>
                                          <div class="form-group mb-3">
                                              <label>Rate</label>
                                              <input type="number" name="items[${itemIndex}][rate]" class="form-control" required>
                                          </div>
                                      `;
                                  } else if (type === 'designation') {
                                      html = `
                                          <div class="form-group mb-3">
                                              <label>Designation</label>
                                              <select name="items[${itemIndex}][designation_id]" class="form-control" required>
                                                  ${designationsHtml}
                                              </select>
                                          </div>
                                          <div class="form-group mb-3">
                                              <label>Count</label>
                                              <input type="number" name="items[${itemIndex}][count]" class="form-control" value="1" required>
                                          </div>
                                      `;
                                  }
                      
                                  fieldsDiv.innerHTML = html;
                              });
                          });
                      });
                      </script>
                      
                    
                  
                
              
                </td>
            </tr>

            {{-- Edit Offcanvas --}}
            <div class="offcanvas offcanvas-end" tabindex="-1" id="editCanvas{{ $invoice->id }}">
              <div class="offcanvas-header">
                <h5>Edit Invoice #{{ $invoice->invoice_number }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
              </div>
              <div class="offcanvas-body">
                @include('proforma_invoices._form', ['mode' => 'edit', 'invoice' => $invoice])
              </div>
            </div>
        @endforeach
        </tbody>
    </table>

    <div class="d-flex justify-content-center">
        {{ $invoices->links() }}
    </div>
</div>

{{-- Create Offcanvas --}}
<div class="offcanvas offcanvas-end" tabindex="-1" id="createInvoiceCanvas">
  <div class="offcanvas-header">
    <h5>Create Proforma Invoice</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    @include('proforma_invoices._form', ['mode' => 'create'])
  </div>
</div>

{{-- JS for dynamic item add/remove --}}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  const availableDesignations = @json($designations);
</script>


  
  
  
  


<script>
  $(document).ready(function () {
    function setupInvoiceFormEvents(form) {
      let itemIndex = 0;
      let availableModules = [];
      let designationIndex = 0;  // Add a new counter for designations

      form.find('.client-select').off('change');
      form.find('.add-item-btn').off('click');
      form.find('.add-other-item-btn').off('click');
      form.find('.add-designation').off('click'); // Bind the click event for designation button
      form.off('click', '.remove-item');

      // Add item row for Modules
      function addItemRow() {
        if (availableModules.length === 0) {
          alert('Please select a client first.');
          return;
        }

        const itemsContainer = form.find('.items-container');

        const itemRow = $(`
          <div class="item-row border p-3 mb-2 rounded bg-light" data-index="${itemIndex}">
            <div class="row g-2 align-items-end">
              <div class="col-md-6">
                <label>Module</label>
                <select name="items[${itemIndex}][module_id]" class="form-control" required>
                  <option value="">-- Select Module --</option>
                  ${availableModules.map(module => `<option value="${module.id}">${module.name}</option>`).join('')}
                </select>
              </div>
              <div class="col-md-4">
                <label>Price</label>
                <input type="number" name="items[${itemIndex}][price]" class="form-control" value="0" required>
              </div>
              <div class="col-md-2 d-flex align-items-end">
                <button type="button" class="btn btn-danger remove-item w-100">Remove</button>
              </div>
            </div>
          </div>
        `);

        itemsContainer.append(itemRow);
        itemIndex++;
      }

      // Add item row for Other Items
      function addOtherItemRow() {
        const itemsContainer = form.find('.items-container');
        const otherIndex = itemIndex++;

        const otherItemRow = $(`
          <div class="item-row border p-3 mb-2 rounded bg-warning-subtle" data-index="${otherIndex}">
            <div class="row g-2 align-items-end">
              <div class="col-md-6">
                <label>Other Item Title</label>
                <input type="text" name="items[${otherIndex}][custom_module]" class="form-control" required>
              </div>
              <div class="col-md-4">
                <label>Price</label>
                <input type="number" name="items[${otherIndex}][price]" class="form-control" value="0" required>
              </div>
              <div class="col-md-2 d-flex align-items-end">
                <button type="button" class="btn btn-danger remove-item w-100">Remove</button>
              </div>
              <input type="hidden" name="items[${otherIndex}][module_id]" value="other">
            </div>
          </div>
        `);

        itemsContainer.append(otherItemRow);
      }

      // Add item row for Designations
      function addDesignationRow() {
  const designationContainer = form.find('.designation-container');

  const optionsHtml = availableDesignations.map(designation =>
    `<option value="${designation.name}">${designation.name}</option>`
  ).join('');

  const designationRow = $(`
    <div class="designation-row border p-3 mb-2 rounded bg-info" data-index="${designationIndex}">
      <div class="row g-2 align-items-end">
        <div class="col-md-6">
          <label>Designation</label>
          <select name="designations[${designationIndex}][designation]" class="form-control" required>
            <option value="">-- Select Designation --</option>
            ${optionsHtml}
          </select>
        </div>
        <div class="col-md-4">
          <label>Count</label>
          <input type="number" name="designations[${designationIndex}][count]" class="form-control" value="1" required>
        </div>
        <div class="col-md-2 d-flex align-items-end">
          <button type="button" class="btn btn-danger remove-item w-100">Remove</button>
        </div>
      </div>
    </div>
  `);

  designationContainer.append(designationRow);
  designationIndex++;
}


      // Client change event for module loading
      form.find('.client-select').on('change', function () {
        const clientId = $(this).val();
        const loading = form.find('.module-loading');
        const itemsContainer = form.find('.items-container');

        if (!clientId) return;

        loading.removeClass('d-none');

        $.get(`/get-client-modules/${clientId}`, function (data) {
          availableModules = data;

          itemsContainer.empty();
          itemIndex = 0;
          addItemRow();
        }).fail(function () {
          alert('Failed to load modules');
        }).always(function () {
          loading.addClass('d-none');
        });
      });

      // Event listeners for buttons
      form.find('.add-item-btn').on('click', function () {
        addItemRow();
      });

      form.find('.add-other-item-btn').on('click', function () {
        addOtherItemRow();
      });

      form.find('.add-designation').on('click', function () {
        addDesignationRow();  // Trigger the addDesignationRow function
      });

      form.on('click', '.remove-item', function () {
        $(this).closest('.item-row, .designation-row').remove();
      });

      // Auto-trigger on edit for modules
      if (form.find('.client-select').val()) {
        form.find('.client-select').trigger('change');
      }
    }

    // Initialize all forms
    $('.invoice-form').each(function () {
      setupInvoiceFormEvents($(this));
    });

    $('.offcanvas').on('shown.bs.offcanvas', function () {
      const form = $(this).find('.invoice-form');
      if (form.length) {
        setupInvoiceFormEvents(form);
      }
    });
  });
</script>



<script>
  document.addEventListener('DOMContentLoaded', function () {
    const createOffcanvas = document.getElementById('createInvoiceCanvas');

    createOffcanvas.addEventListener('shown.bs.offcanvas', function () {
      const form = createOffcanvas.querySelector('form.invoice-form');
      if (!form) return;

      form.reset();

      const clientSelect = form.querySelector('#client_id');
      if (clientSelect) clientSelect.selectedIndex = 0;

      const remarks = form.querySelector('[name="remarks"]');
      if (remarks) remarks.value = '';

      const status = form.querySelector('[name="status"]');
      if (status) status.value = 'draft';

      const itemsWrapper = form.querySelector('.items-wrapper');
      if (itemsWrapper) {
        const rows = itemsWrapper.querySelectorAll('.item-row');
        rows.forEach((row, index) => {
          if (index === 0) {
            row.querySelectorAll('input').forEach(input => {
              if (input.type === 'number') input.value = 0;
              else input.value = '';
            });
          } else {
            row.remove();
          }
        });
      }
    });
  });
</script>

@endsection