@extends('adminlte::page')

@section('title', 'Invoices')

@section('content_header')
    <h1>Invoices</h1>
@endsection

@include('partials.datatables')

@section('content')    
    <div class="card shadow-sm mb-3">
        <div class="card-body py-3">
            <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
                <ul class="nav nav-pills toolbar-nav me-auto mb-2 mb-md-0">
                    <li class="nav-item me-1">
                        <a href="{{ route('invoices.index') }}" class="nav-link {{ empty($status) ? 'active' : '' }}">All <span class="badge bg-light text-dark ms-1">{{ $total ?? $invoices->count() }}</span></a>
                    </li>
                    @foreach(['draft'=>'Draft','sent'=>'Sent','partial'=>'Partial','paid'=>'Paid','overdue'=>'Overdue','cancelled'=>'Cancelled'] as $key => $label)
                        @php($count = $statusCounts[$key] ?? 0)
                        <li class="nav-item me-1">
                            <a href="?status={{ $key }}" class="nav-link {{ ($status??null)===$key ? 'active' : '' }}">{{ $label }} <span class="badge bg-light text-dark ms-1">{{ $count }}</span></a>
                        </li>
                    @endforeach
                </ul>
                <form method="get" class="ms-auto d-flex align-items-center gap-2" style="min-width:320px">
                    @if($status)
                        <input type="hidden" name="status" value="{{ $status }}">
                    @endif
                    <div class="input-group input-group-sm flex-grow-1">
                        <span class="input-group-text bg-white"><i class="fas fa-search"></i></span>
                        <input type="text" name="q" value="{{ $q }}" class="form-control" placeholder="Search invoice no, client, notes">
                        <button class="btn btn-outline-secondary" type="submit">Search</button>
                    </div>
                    <button class="btn btn-sm btn-outline-primary" type="button" data-toggle="collapse" data-target="#invoice-filters" aria-expanded="false" aria-controls="invoice-filters">
                        <i class="fas fa-sliders-h"></i> Filters
                    </button>
                </form>
            </div>
            <div id="invoice-filters" class="collapse show">
            <form method="get" class="row gx-2 gy-2 align-items-end">
                @if($status)
                    <input type="hidden" name="status" value="{{ $status }}">
                @endif
                <div class="col-sm-6 col-md-3 col-lg-3">
                    <label class="form-label text-muted small mb-1">Client</label>
                    <select name="client_id" class="form-select form-select-sm">
                        <option value="">All</option>
                        @foreach($clients as $c)
                            <option value="{{ $c->id }}" {{ (string)($clientId??'')===(string)$c->id?'selected':'' }}>{{ trim(($c->company_name ?: ( ($c->first_name ?? '').' '.($c->last_name ?? '') ))) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-sm-6 col-md-3 col-lg-3">
                    <label class="form-label text-muted small mb-1">Case</label>
                    <select name="case_id" class="form-select form-select-sm">
                        <option value="">All</option>
                        @foreach($cases as $c)
                            <option value="{{ $c->id }}" {{ (string)($caseId??'')===(string)$c->id?'selected':'' }}>{{ $c->case_number }} — {{ Str::limit($c->title, 40) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-sm-6 col-md-2 col-lg-2">
                    <label class="form-label text-muted small mb-1">From</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-white"><i class="far fa-calendar-alt"></i></span>
                        <input type="date" name="from" value="{{ $from }}" class="form-control" />
                    </div>
                </div>
                <div class="col-sm-6 col-md-2 col-lg-2">
                    <label class="form-label text-muted small mb-1">To</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-white"><i class="far fa-calendar-alt"></i></span>
                        <input type="date" name="to" value="{{ $to }}" class="form-control" />
                    </div>
                </div>
                <div class="col-sm-6 col-md-2 col-lg-2">
                    <label class="form-label text-muted small mb-1">Min Total</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-white">Rp</span>
                        <input type="number" step="0.01" name="min_total" value="{{ $minTotal }}" class="form-control" />
                    </div>
                </div>
                <div class="col-sm-6 col-md-2 col-lg-2">
                    <label class="form-label text-muted small mb-1">Max Total</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-white">Rp</span>
                        <input type="number" step="0.01" name="max_total" value="{{ $maxTotal }}" class="form-control" />
                    </div>
                </div>
                <div class="col-sm-6 col-md-2 col-lg-2">
                    <label class="form-label text-muted small mb-1">Sort</label>
                    <select name="sort" class="form-select form-select-sm">
                        <option value="date_desc" {{ ($sort??'')==='date_desc'?'selected':'' }}>Date ↓</option>
                        <option value="date_asc" {{ ($sort??'')==='date_asc'?'selected':'' }}>Date ↑</option>
                        <option value="due_desc" {{ ($sort??'')==='due_desc'?'selected':'' }}>Due ↓</option>
                        <option value="due_asc" {{ ($sort??'')==='due_asc'?'selected':'' }}>Due ↑</option>
                        <option value="total_desc" {{ ($sort??'')==='total_desc'?'selected':'' }}>Total ↓</option>
                        <option value="total_asc" {{ ($sort??'')==='total_asc'?'selected':'' }}>Total ↑</option>
                        <option value="number_asc" {{ ($sort??'')==='number_asc'?'selected':'' }}>Number A→Z</option>
                        <option value="number_desc" {{ ($sort??'')==='number_desc'?'selected':'' }}>Number Z→A</option>
                    </select>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-3 text-end ms-auto">
                    <button class="btn btn-sm btn-primary me-1"><i class="fas fa-filter me-1"></i>Apply</button>
                    <a href="{{ route('invoices.index') }}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-undo me-1"></i>Reset</a>
                </div>
            </form>
            </div>
        </div>
    </div>
    <div class="card dashboard-table-card">
        <div class="card-header">
            <h3 class="card-title"><i class="fas fa-file-invoice"></i> All Invoices</h3>
            <div class="card-header-actions"></div>
        </div>
        <div class="card-body p-0">
            <div class="dashboard-table-container">
                <table class="table table-modern w-100">
                    <thead>
                    <tr>
                        <th class="text-nowrap">#</th>
                        <th class="text-nowrap">Invoice No</th>
                        <th>Client</th>
                        <th class="text-nowrap">Date</th>
                        <th class="text-nowrap">Due</th>
                        <th class="text-nowrap">Total</th>
                        <th class="text-nowrap">Status</th>
                        <th class="text-nowrap text-right">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($invoices as $invoice)
                        <tr>
                            <td class="text-nowrap">{{ $invoice->id }}</td>
                            <td class="text-nowrap"><a href="{{ route('invoices.show', $invoice) }}" class="text-body">{{ $invoice->invoice_number }}</a></td>
                            <td>{{ $invoice->client->display_name ?? '—' }}</td>
                            <td class="text-nowrap">{{ optional($invoice->invoice_date)->format('Y-m-d') }}</td>
                            <td class="text-nowrap">{{ optional($invoice->due_date)->format('Y-m-d') }}</td>
                            <td class="text-nowrap">{{ number_format($invoice->total_amount, 2) }}</td>
                            <td class="text-nowrap">
                                <span class="badge {{ $invoice->status==='paid' ? 'badge-success' : ($invoice->status==='overdue' ? 'badge-danger' : ($invoice->status==='sent' ? 'badge-info' : ($invoice->status==='partial' ? 'badge-warning' : 'badge-secondary'))) }}">{{ ucfirst($invoice->status) }}</span>
                            </td>
                            <td class="text-nowrap text-right">
                                <a href="{{ route('invoices.show', $invoice) }}" class="btn btn-sm btn-info">View</a>
                                <a href="{{ route('invoices.edit', $invoice) }}" class="btn btn-sm btn-warning">Edit</a>
                                <form action="{{ route('invoices.destroy', $invoice) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this invoice?')">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-sm btn-danger" type="submit">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <a href="{{ route('invoices.create-memo') }}" class="btn btn-primary">New Invoice</a>
                                <div class="btn-group">
                                        <button type="button" id="btn-export-csv" class="btn btn-outline-secondary btn-sm">
                                                <i class="fas fa-file-csv"></i> Export CSV
                                        </button>
                                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
<script>
    (function(){
        function csvEscape(value){
            const v = (value ?? '').toString();
            // Escape double quotes by doubling them, wrap in quotes if contains comma, quote, or newline
            const needsWrap = /[",\n]/.test(v);
            const escaped = v.replace(/"/g, '""');
            return needsWrap ? '"' + escaped + '"' : escaped;
        }
        function stripHtml(html){
            const div = document.createElement('div');
            div.innerHTML = html;
            return (div.textContent || div.innerText || '').trim();
        }
        function getHeaders(tableEl){
            const ths = tableEl.querySelectorAll('thead th');
            return Array.from(ths).map(th => th.textContent.trim());
        }

        function exportCsv(){
            const tableEl = document.querySelector('.table-modern');
            if (!tableEl) return;
            let headers = getHeaders(tableEl);
            const lastIdx = headers.length - 1; // exclude Actions column
            const exportHeader = headers.slice(0, lastIdx);
            let rows = [];

            // Prefer DataTables API if available to export all filtered rows
            if (window.jQuery && jQuery.fn && jQuery.fn.dataTable && jQuery.fn.dataTable.isDataTable(tableEl)) {
                const dt = jQuery(tableEl).DataTable();
                const data = dt.rows({ search: 'applied' }).data().toArray();
                for (const row of data) {
                    const arr = [];
                    for (let i = 0; i < lastIdx; i++) {
                        // DataTables rows may contain HTML; strip it
                        arr.push(stripHtml(row[i] ?? ''));
                    }
                    rows.push(arr);
                }
            } else {
                // Fallback: export currently rendered rows
                const trs = tableEl.querySelectorAll('tbody tr');
                trs.forEach(tr => {
                    const tds = tr.querySelectorAll('td');
                    const arr = [];
                    for (let i = 0; i < Math.min(lastIdx, tds.length); i++) {
                        arr.push((tds[i].textContent || '').trim());
                    }
                    rows.push(arr);
                });
            }

            const csvLines = [];
            csvLines.push(exportHeader.map(csvEscape).join(','));
            rows.forEach(r => csvLines.push(r.map(csvEscape).join(',')));
            const csv = csvLines.join('\n');

            const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
            const url = URL.createObjectURL(blob);
            const ts = new Date();
            const pad = n => (n < 10 ? '0' + n : n);
            const fname = `invoices_${ts.getFullYear()}${pad(ts.getMonth()+1)}${pad(ts.getDate())}_${pad(ts.getHours())}${pad(ts.getMinutes())}${pad(ts.getSeconds())}.csv`;
            const a = document.createElement('a');
            a.href = url;
            a.download = fname;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }

        const btn = document.getElementById('btn-export-csv');
        if (btn) btn.addEventListener('click', exportCsv);
    })();
</script>
@endsection

@section('css')
<style>
    .toolbar-nav .nav-link { padding: .35rem .65rem; }
    .toolbar-nav .badge { font-weight: 500; }
    .dashboard-table-card .card-title { display: flex; align-items: center; gap: .5rem; }
    /* Make the collapse start open on wide screens for discoverability */
    @media (min-width: 992px) {
        #invoice-filters.collapse:not(.show) { display: block; }
    }
    /* Align input-group-text height with form-select-sm */
    .input-group-text { height: 31px; }
</style>
@endsection