@section('page-script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script>
    <link rel="stylesheet" href="{{ asset('assets/css/multiselect.css') }}" />
@endsection
<div class="container">
  <div class="row">
      <div class="col-md-12">
          @extends('layouts.invoicetab')
      </div>
  </div>
</div>
@section('invoice_content')

<div class="container">
  <div class="row">
    <div class="col-md-4 mb-4">
        <div class="card shadow-lg border-light rounded-3 h-100">
            <div class="card-body text-center">
                <a class="nav-link {{ request()->is('technologies') ? 'active' : '' }} waves-effect waves-light" href="{{ url('technologies') }}">
                    <div class="mb-3">
                        <i class="mdi mdi-file-document-outline display-4 text-secondary"></i>
                    </div>
                    <h5 class="card-title">Technologies</h5>
                    
                    <p class="text-primary">Add Technologies</p>
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-4 mb-4">
        <div class="card shadow-lg border-light rounded-3 h-100">
            <div class="card-body text-center">
                <a class="nav-link {{ request()->is('managedesignation') ? 'active' : '' }} waves-effect waves-light" href="{{ url('managedesignation') }}">
                    <div class="mb-3">
                        <i class="mdi mdi-lock-outline display-4 text-secondary"></i>
                    </div>
                    <h5 class="card-title">Resources Involved</h5>
                   {{--  <p class="card-text">Ensure the safety and security of your assets with our expert security solutions.</p> --}}
                    <p class="text-primary">Add Designation</p>
                </a>
            </div>
        </div>
    </div>
</div>
    

    <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

  <div class="accordion" id="clientInvoiceAccordion">
@foreach($groupedInvoices as $clientId => $clientInvoices)
    @php
        $clientName = $clientInvoices->first()->client->name ?? 'N/A';
    @endphp

    <div class="accordion-item mb-3">
        <h2 class="accordion-header" id="heading-{{ $clientId }}">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ $clientId }}">
                {{ $clientName }} ({{ $clientInvoices->count() }} Invoices)
            </button>
            <button type="button" class="btn btn-sm btn-outline-primary ms-3" data-bs-toggle="modal" data-bs-target="#cloneModal_{{ $clientId }}">
    Duplicate to Another Client
</button>
                        <!-- Clone Modal -->
<!-- Clone Modal -->
<!-- Modal -->
<div class="modal fade" id="cloneModal_{{ $clientId }}" tabindex="-1" aria-labelledby="cloneModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form action="{{ route('invoices.clone') }}" method="POST"> {{-- ✅ FORM STARTS HERE --}}
      @csrf
      <input type="hidden" name="source_client_id" value="{{ $clientId }}">

      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="cloneModalLabel">Clone to New Client</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">
          <div class="mb-3">
            <label for="new_client_id_{{ $clientId }}" class="form-label">Select New Client</label>
            <select class="form-control" name="new_client_id" id="new_client_id_{{ $clientId }}" required>
              <option value="">-- Select Client --</option>
              @foreach($clients as $client)
                @if($client->id != $clientId)
                  <option value="{{ $client->id }}">{{ $client->name }}</option>
                @endif
              @endforeach
            </select>
          </div>
        </div>

        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Clone</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        </div>
      </div> {{-- end modal-content --}}
    </form> {{-- ✅ FORM ENDS HERE --}}
  </div>
</div>




        </h2>
        <div id="collapse-{{ $clientId }}" class="accordion-collapse collapse" data-bs-parent="#clientInvoiceAccordion">
            <div class="accordion-body">
                <table class="table table-bordered table-striped mb-0">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Invoice No</th>
                            <th>Date</th>
                            <th>Total</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach($clientInvoices as $index => $invoice)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $invoice->invoice_number }}</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>
                                {{-- Actions: Preview, Edit, Modal trigger, etc. --}}
                                <a href="{{ route('proforma-invoices.preview', $invoice->id) }}" class="btn btn-sm btn-outline-success"><i class="mdi mdi-printer-search"></i></a>
                                {{-- Envelope Print Button --}}
<a href="{{ route('proforma-invoices.envelope', $invoice->id) }}" class="btn btn-sm btn-outline-primary" target="_blank" title="Print Envelope">
    <i class="mdi mdi-printer"></i> Envelope
</a>
                                <a data-bs-toggle="offcanvas" data-bs-target="#editCanvas{{ $invoice->id }}" class="btn btn-sm btn-outline-warning"><i class="mdi mdi-file-edit-outline"></i></a>
                                {{-- Other buttons --}}
                                 <a type="button" class="btn btn-sm btn-outline-secondary 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 }}">
                        <span class="mdi mdi-note-plus-outline"></span>
                        </a>

                       @php
    $hasRevisedCopy = \App\Models\ProformaInvoice::where('revision_of_id', $invoice->id)->exists();
@endphp

@if (!$hasRevisedCopy)
    <form action="{{ route('proforma-invoices.revise', $invoice->id) }}" method="POST" class="d-inline">
        @csrf
        <input type="hidden" name="date" value="{{ $invoice->date }}">
        <input type="hidden" name="client_id" value="{{ $invoice->client_id }}">
        <input type="hidden" name="total_amount" value="{{ $invoice->total_amount }}">
        <input type="hidden" name="remarks" value="{{ $invoice->remarks }}">
        <input type="hidden" name="technologies" value="{{ json_encode(json_decode($invoice->technologies, true)) }}">
        <button type="submit" class="btn btn-warning btn-sm" onclick="return confirm('Are you sure you want to save this as a revised record?')">
            Save Before Revised Record
        </button>
    </form>
@endif



                    
                    <!-- 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);
                          const designationsHtml = `@foreach($designations as $desig)<option value="{{ $desig->id }}">{{ $desig->name }}</option>@endforeach`;
                      
                          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 = Date.now(); // Unique per selection
                                  let html = '';
                                  const selectedClientId = parseInt(clientInput.value);
                      
                                  const filteredModules = modules.filter(module => {
                                      const clientId = module.activity?.client;
                                      return parseInt(clientId) === selectedClientId;
                                  });
                      
                                  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>
                                          <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 === '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>
        </div>
    </div>
@endforeach
</div>


    <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>
   window.availableDesignations = @json($designations);
</script>



  
  
  
  
<script>
  $(document).ready(function () {
    // ✅ GLOBAL remove button handlers (works for edit & dynamic content)
    $(document).on('click', '.remove-item', function () {
      $(this).closest('.item-row').remove();
      updateModuleDropdowns(); // Recalculate after remove
    });

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

    // ✅ Main setup function
    function setupInvoiceFormEvents(form) {
      let itemIndex = form.find('.item-row').length || 0;
      let designationIndex = form.find('.designation-row').length || 0;

      let availableModules = window.availableModules || [];
      let availableDesignations = window.availableDesignations || [];

      // Avoid double binding
      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');

      function updateModuleDropdowns() {
        const selectedModules = [];

        // Collect all selected module values
        form.find('select[name^="items"][name$="[module_id]"]').each(function () {
          const val = $(this).val();
          if (val && val !== 'other') selectedModules.push(val);
        });

        // Disable selected values in all module dropdowns
        form.find('select[name^="items"][name$="[module_id]"]').each(function () {
          const currentSelect = $(this);
          const currentVal = currentSelect.val();

          currentSelect.find('option').each(function () {
            const optionVal = $(this).val();

            if (!optionVal || optionVal === currentVal) {
              $(this).prop('disabled', false);
              return;
            }

            $(this).prop('disabled', selectedModules.includes(optionVal));
          });
        });
      }

      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);

        // Bind change event to update disabled options
        itemRow.find('select[name$="[module_id]"]').on('change', updateModuleDropdowns);

        itemIndex++;
        updateModuleDropdowns();
      }

      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);
        updateModuleDropdowns();
      }

      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-designation w-100">Remove</button>
              </div>
            </div>
          </div>
        `);

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

      // 🔄 Load modules for selected client
      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(); // Add first item
        }).fail(function () {
          alert('Failed to load modules');
        }).always(function () {
          loading.addClass('d-none');
          setTimeout(() => updateModuleDropdowns(), 200); // Ensure dropdowns are refreshed
        });
      });

      // ➕ Add item / other / designation
      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();
      });

      // Preload if client is already selected (Edit mode)
      if (form.find('.client-select').val()) {
        form.find('.client-select').trigger('change');
      }
    }

    // ✅ Initial binding for any forms already present
    $('.invoice-form').each(function () {
      setupInvoiceFormEvents($(this));
    });

    // ✅ Re-bind after offcanvas loads dynamic form
    $(document).on('shown.bs.offcanvas', '.offcanvas', function () {
      const form = $(this).find('.invoice-form');
      setTimeout(() => {
        if (form.length) {
          setupInvoiceFormEvents(form);
        }
      }, 100);
    });
  });
</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