@extends('admin.layout.app')

@section('body')
<div class="container py-4">

    {{-- Screen-only toolbar --}}
    <div class="d-flex justify-content-between align-items-center mb-3 no-print">
        <div>
            <h4 class="mb-0">Company Ledger</h4>
            <small class="text-muted">Dealings (Debit), Payments (Credit), with running balance</small>
        </div>
        <div class="d-flex gap-2">
            {{-- Export dropdown (Header) --}}
            <div class="dropdown">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fas fa-file-export me-1"></i> Export
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="javascript:void(0)" id="exportExcel_header">
                        <i class="fas fa-file-excel me-2 text-success"></i> Export Excel
                    </a></li>
                    <li><a class="dropdown-item" href="javascript:void(0)" id="exportCSV_header">
                        <i class="fas fa-file-csv me-2 text-info"></i> Export CSV
                    </a></li>
                    <li><a class="dropdown-item" href="javascript:void(0)" id="exportPDF_header">
                        <i class="fas fa-file-pdf me-2 text-danger"></i> Export PDF
                    </a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="javascript:void(0)" id="print_header">
                        <i class="fas fa-print me-2"></i> Print
                    </a></li>
                </ul>
            </div>

            <button type="button" id="print-btn" class="btn btn-outline-dark">
                <i class="fa-solid fa-print me-1"></i> Print
            </button>
            <a href="{{ url()->previous() }}" class="btn btn-outline-secondary">Back</a>
        </div>
    </div>

    {{-- Filters (screen only) --}}
    <form class="row g-2 mb-4 no-print" method="GET">
        <div class="col-auto">
            <select name="company_id" class="form-select">
                <option value="">All Companies</option>
                @foreach ($companies as $c)
                    <option value="{{ $c->id }}" {{ (string)$companyId === (string)$c->id ? 'selected' : '' }}>
                        {{ $c->name }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-auto">
            <input type="date" class="form-control" name="from" value="{{ $from }}">
        </div>
        <div class="col-auto">
            <input type="date" class="form-control" name="to" value="{{ $to }}">
        </div>
        <div class="col-auto d-flex gap-2">
            <button class="btn btn-primary">Filter</button>

            {{-- Export dropdown (Form-level) --}}
            <div class="dropdown">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fas fa-file-export me-1"></i> Export
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="javascript:void(0)" id="exportExcel_form">
                        <i class="fas fa-file-excel me-2 text-success"></i> Export Excel
                    </a></li>
                    <li><a class="dropdown-item" href="javascript:void(0)" id="exportCSV_form">
                        <i class="fas fa-file-csv me-2 text-info"></i> Export CSV
                    </a></li>
                    <li><a class="dropdown-item" href="javascript:void(0)" id="exportPDF_form">
                        <i class="fas fa-file-pdf me-2 text-danger"></i> Export PDF
                    </a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="javascript:void(0)" id="print_form">
                        <i class="fas fa-print me-2"></i> Print
                    </a></li>
                </ul>
            </div>
        </div>
    </form>

    {{-- ===================== PRINT AREA START ===================== --}}
    <div class="print-area">

        {{-- Compact title row (prints too) --}}
        <div class="d-flex justify-content-between align-items-end mb-2">
            <div>
                <h5 class="mb-0">Company Ledger</h5>
                @php $activeCompany = $companies->firstWhere('id', $companyId); @endphp
                <small class="text-muted">
                    Company: {{ optional($activeCompany)->name ?? 'All' }}
                    &nbsp;|&nbsp; From: {{ $from ?: '—' }}
                    &nbsp;|&nbsp; To: {{ $to ?: '—' }}
                </small>
            </div>
            <div class="text-muted small no-print">
                Generated: {{ \Carbon\Carbon::now()->format('Y-m-d H:i') }}
            </div>
        </div>

        {{-- Summary per company --}}
        @if ($summary->isNotEmpty())
            <div class="table-responsive mb-3">
                <table class="table table-sm table-bordered">
                    <thead class="table-light">
                        <tr>
                            <th>Company</th>
                            <th class="text-end">Total Debit</th>
                            <th class="text-end">Total Credit</th>
                            <th class="text-end">Balance</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($summary as $cid => $s)
                            <tr>
                                <td>{{ optional($companies->firstWhere('id', $cid))->name ?? '#' }}</td>
                                <td class="text-end">{{ number_format($s['debit'], 2) }}</td>
                                <td class="text-end">{{ number_format($s['credit'], 2) }}</td>
                                <td class="text-end fw-semibold {{ $s['balance'] >= 0 ? 'text-success' : 'text-danger' }}">
                                    {{ number_format($s['balance'], 2) }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif

        {{-- Main table --}}
        <div class="table-responsive">
            <table id="ledgerTable" class="table table-striped align-middle">
                <thead class="table-light">
                    <tr>
                        <th style="width:110px;">Date</th>
                        <th>Company</th>
                        <th style="width:120px;">Type</th>
                        <th class="text-end" style="width:140px;">Debit</th>
                        <th class="text-end" style="width:140px;">Credit</th>
                        <th class="text-end" style="width:160px;">Running Balance</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($rows as $r)
                        <tr>
                            <td>{{ $r->date ? \Carbon\Carbon::parse($r->date)->format('Y-m-d') : '—' }}</td>
                            <td>{{ optional($companies->firstWhere('id', $r->company))->name }}</td>
                            <td>
                                @if ($r->type === 'dealing')
                                    <span class="badge bg-primary">Dealing</span>
                                @else
                                    <span class="badge bg-success">Payment</span>
                                @endif
                            </td>
                            <td class="text-end">{{ $r->debit   ? number_format($r->debit, 2) : '' }}</td>
                            <td class="text-end">{{ $r->credit  ? number_format($r->credit, 2) : '' }}</td>
                            <td class="text-end fw-semibold {{ $r->balance >= 0 ? 'text-success' : 'text-danger' }}">
                                {{ number_format($r->balance, 2) }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted">No data for the selected filters.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

    </div>
    {{-- ===================== PRINT AREA END ===================== --}}

</div>

{{-- PRINT CSS (A4 landscape, print only .print-area) --}}
<style>
  .no-print { display: block; }
  .only-print { display: none; }
  table.table tr td, table.table tr th { padding: .55rem .6rem; }

  @media print {
    @page { size: A4 landscape; margin: 12mm; }
    body * { visibility: hidden !important; }
    .print-area, .print-area * { visibility: visible !important; }
    .print-area { position: fixed; left: 0; top: 0; right: 0; }
    .no-print, .btn, a.btn, form, .alert { display: none !important; }
    table { width: 100% !important; border-collapse: collapse !important; }
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
    tr, td, th { page-break-inside: avoid; }
    .table-responsive { overflow: visible !important; }
    .badge, .table-light th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body { font-size: 11px; }
    .table td, .table th { padding: 6px 8px !important; }
  }
</style>
@endsection

@section('scripts')
{{-- Export libs --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js"></script>

<script>
  // Clean table for export: clone + visible rows + strip badges + numeric normalize
  function getCleanLedgerTable() {
    const src = document.getElementById('ledgerTable');
    const clone = src.cloneNode(true);

    if (clone.tBodies.length) {
      Array.from(clone.tBodies[0].rows).forEach(function(row){
        const hidden = row.style.display === 'none' || row.classList.contains('d-none');
        if (hidden) { row.remove(); return; }

        // Type: replace badge with plain text
        const typeCell = row.cells[2];
        if (typeCell) {
          const txt = typeCell.textContent.trim();
          typeCell.textContent = txt; // removes inner spans
        }

        // Numeric columns: Debit(3), Credit(4), Balance(5)
        [3,4,5].forEach(function(i){
          const cell = row.cells[i];
          if (!cell) return;
          const raw = cell.textContent.replace(/[,\s]/g,'');
          const n = parseFloat(raw);
          cell.textContent = isNaN(n) ? '' : n.toFixed(2);
          cell.classList.remove('text-end');
        });
      });
    }
    return clone;
  }

  function exportExcel() {
    const clean = getCleanLedgerTable();
    const wb = XLSX.utils.table_to_book(clean, { sheet: 'Ledger', raw: true });
    XLSX.writeFile(wb, 'company_ledger.xlsx');
  }

  function exportCSV() {
    const clean = getCleanLedgerTable();
    const ws = XLSX.utils.table_to_sheet(clean, { raw: true });
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Ledger');
    XLSX.writeFile(wb, 'company_ledger.csv', { bookType: 'csv' });
  }

  function exportPDF() {
    const { jsPDF } = window.jspdf;
    const doc = new jsPDF('l', 'pt', 'a4'); // landscape
    doc.setFontSize(14);
    doc.text('Company Ledger', 40, 40);

    // optional: show current filters
    var companySelText = (function(){
      var sel = document.querySelector('select[name="company_id"]');
      if (!sel || !sel.value) return 'All Companies';
      return sel.options[sel.selectedIndex].text;
    })();
    var from = document.querySelector('input[name="from"]')?.value || '—';
    var to   = document.querySelector('input[name="to"]')?.value   || '—';
    doc.setFontSize(10);
    doc.text('Company: ' + companySelText + '   Range: ' + from + ' — ' + to, 40, 56);

    const clean = getCleanLedgerTable();
    doc.autoTable({
      html: clean,
      startY: 70,
      styles: { fontSize: 9, cellPadding: 4 },
      headStyles: { fillColor: [245, 245, 245] },
      theme: 'striped',
      margin: { left: 40, right: 40 }
    });
    doc.save('company_ledger.pdf');
  }

  // Wire both header & form dropdowns + print buttons
  (function(){
    var ids = [
      ['exportExcel_header', exportExcel],
      ['exportCSV_header',   exportCSV],
      ['exportPDF_header',   exportPDF],
      ['print_header',       function(){ window.print(); }],
      ['exportExcel_form',   exportExcel],
      ['exportCSV_form',     exportCSV],
      ['exportPDF_form',     exportPDF],
      ['print_form',         function(){ window.print(); }],
    ];
    ids.forEach(function(pair){
      var el = document.getElementById(pair[0]);
      if (el) el.addEventListener('click', pair[1]);
    });

    // Existing print button sets document title for print
    var btn = document.getElementById('print-btn');
    if (btn) {
      btn.addEventListener('click', function () {
        var company = @json(optional($companies->firstWhere('id', $companyId))->name ?? 'All');
        var from    = @json($from ?: '—');
        var to      = @json($to   ?: '—');

        var prevTitle = document.title;
        document.title = 'Company Ledger - ' + company + ' [' + from + ' to ' + to + ']';
        window.print();
        setTimeout(function(){ document.title = prevTitle; }, 250);
      });
    }
  })();
</script>
@endsection