@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 Service 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('service-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('service-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> --}}
                    <a href="{{ route('service-invoices.payment-receipt', $invoice->id) }}" class="btn btn-sm btn-outline-info">
                      <span class="mdi mdi-cash"></span>
                  </a>


                   <!-- Trigger Button -->
                   <a type="button" class="btn btn-sm btn-outline-secondary open-missing-modal mt-2"
                   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>
               
               <!-- 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('service.missing.store') }}">
                           @csrf
                           <input type="hidden" name="service_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);  // Server-passed module data
                    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;  // If multiple items, update this logic
                            let html = '';
                            const selectedClientId = parseInt(clientInput.value);
                
                            // Filter modules by client
                            const filteredModules = modules.filter(module => {
                                const clientId = module.activity?.client;
                                return parseInt(clientId) === 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>
                                    <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>
                                `;
                            }
                
                            // Render generated fields
                            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('service_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 Service Invoice</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    @include('service_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">
                  <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">
              </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