@extends('admin.layouts.layout')

@section('content')
<div class="mb-4">
    <div class="servicestitle d-flex align-items-center">
        <h3 class="mb-0">Invoice Notes</h3>
        @if($permission['create'] ?? true)
        <div class="services_searchbtn d-flex align-items-center gap-2 ms-auto">
            <div class="contact_btns">
                <a href="{{ route('invoice-notes.create') }}" class="add_btn btn">
                    <img src="{{ asset('images/add_service.svg') }}" alt="Add"> Add Invoice Note
                </a>
            </div>
        </div>
        @endif
    </div>

    <div class="service_contentarea mt-3">
        <div class="table-responsive">
            <table class="table service_table">
                <thead>
                    <tr>
                        @if(!session('tenant_id'))
                        <th>Tenant</th>
                        @endif
                        <th>Language</th>
                        <th>Note</th>
                        <th width="120">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($data as $note)
                        <tr>
                            @if(!session('tenant_id'))
                            <td>{{ $note->tenant->name ?? '-' }}</td>
                            @endif
                            <td>{{ $note->language->name ?? '-' }}</td>
                            <td>{{ $note->short_note ?? '-' }}</td>
                            <td>
                                <a href="javascript:void(0);" class="me-2 view-invoice-note" data-note-id="{{ $note->id }}" data-language="{{ $note->language->name ?? '' }}" data-tenant="{{ (!session('tenant_id') ? ($note->tenant->name ?? '') : '') }}" data-content-id="invoice-note-content-{{ $note->id }}" title="View">
                                    <img src="{{ asset('images/view.svg') }}" alt="View">
                                </a>
                                @if($permission['edit'] ?? true)
                                <a href="{{ route('invoice-notes.edit', $note->id) }}" class="me-2" title="Edit">
                                    <img src="{{ asset('images/edit.svg') }}" alt="Edit">
                                </a>
                                @endif
                                @if($permission['destroy'] ?? true) 
                                <a href="javascript:void(0);" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="event.preventDefault(); document.getElementById('delete-form-{{$note->id}}').submit();" title="Delete">
                                    <img src="{{ asset('images/delete_black.svg') }}" alt="Delete">
                                </a>
                                {!! html()->form('DELETE', route('invoice-notes.destroy', $note->id))->attributes(['style' => 'display:none', 'id' => 'delete-form-'.$note->id])->open() !!}
                                {!! html()->form()->close() !!}
                                <template id="invoice-note-content-{{ $note->id }}">{!! $note->invoice_note !!}</template>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-4">
                                <div class="text-muted">No invoice notes found</div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('page_script')
<div class="modal fade" id="invoiceNoteViewModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title mb-0">Invoice Note Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="mb-2 small text-muted" id="invoice-note-meta"></div>
        <div id="invoice-note-full-content" class="border rounded p-3" style="background:#fafafa; max-height:55vh; overflow:auto;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<script>
(function(){
  const modalEl = document.getElementById('invoiceNoteViewModal');
  let bsModal = null;
  function ensureModal(){ if(!bsModal){ bsModal = new bootstrap.Modal(modalEl); } }
  document.querySelectorAll('.view-invoice-note').forEach(function(btn){
    btn.addEventListener('click', function(){
      const tplId = this.getAttribute('data-content-id');
      const lang = this.getAttribute('data-language') || '-';
      const tenant = this.getAttribute('data-tenant') || '';
      const tpl = document.getElementById(tplId);
      const meta = [];
      if(tenant) meta.push('Tenant: '+tenant);
      meta.push('Language: '+lang);
      document.getElementById('invoice-note-meta').innerText = meta.join(' | ');
      document.getElementById('invoice-note-full-content').innerHTML = tpl ? tpl.innerHTML : '<em>No content</em>';
      ensureModal();
      bsModal.show();
    });
  });
})();
</script>
@endpush