@extends('layouts.admin')
@section('title', 'Invoices')
@section('page-title', 'Invoices')

@section('content')
<div class="billing-invoices-page billing-clients-page">
    @if(!$panelOpen)
    {{-- Toolbar --}}
    <div class="billing-invoice-toolbar card border-0 shadow-sm mb-3">
        <div class="card-body py-3">
            <div class="row g-2 align-items-center">
                <div class="col-lg-auto">
                    <button type="button" class="btn btn-dark" id="btn-toggle-filters" aria-expanded="{{ $hasFilters ? 'true' : 'false' }}">
                        <i class="ri-filter-3-line me-1"></i> Filter Invoices
                        @if($hasFilters)<span class="badge bg-light text-dark ms-1">!</span>@endif
                    </button>
                </div>
                <div class="col-lg flex-grow-1">
                    <form method="GET" action="{{ route('admin.invoices.index') }}" class="billing-invoice-quick-search" id="quick-search-form">
                        @foreach(collect($filters)->except('q') as $key => $val)
                            @if($val && $val !== 'all')
                                <input type="hidden" name="{{ $key }}" value="{{ $val }}">
                            @endif
                        @endforeach
                        <i class="ri-search-line"></i>
                        <input type="text" name="q" class="form-control" placeholder="Search invoices, clients..." value="{{ $filters['q'] ?? '' }}">
                    </form>
                </div>
                <div class="col-lg-auto d-flex gap-2">
                    <div class="dropdown">
                        <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="ri-add-line me-1"></i> New
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end billing-invoice-new-menu shadow">
                            @foreach($createTypes as $typeKey => $meta)
                                <li>
                                    <a class="dropdown-item py-2" href="{{ route('admin.invoices.create', ['type' => $typeKey]) }}">
                                        <i class="{{ $meta['icon'] }} me-2 text-success"></i>
                                        <span class="d-block fw-medium">{{ $meta['label'] }}</span>
                                        <small class="text-muted">{{ $meta['desc'] }}</small>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <a href="{{ route('admin.invoices.export', request()->query()) }}" class="btn btn-light border">
                        <i class="ri-download-2-line me-1"></i> Export
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Filter panel --}}
    <div class="collapse {{ $hasFilters ? 'show' : '' }}" id="invoice-filters">
        <div class="card border-0 shadow-sm mb-3 billing-invoice-filters">
            <div class="card-body">
                <form method="GET" action="{{ route('admin.invoices.index') }}">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Client name</label>
                            <input type="text" name="client_name" class="form-control" value="{{ $filters['client_name'] ?? '' }}" placeholder="Search client">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Invoice no</label>
                            <input type="text" name="invoice_number" class="form-control" value="{{ $filters['invoice_number'] ?? '' }}" placeholder="Doc number">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Item name</label>
                            <input type="text" name="item_name" class="form-control" value="{{ $filters['item_name'] ?? '' }}" placeholder="Product or service">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Issued between</label>
                            <div class="input-group">
                                <input type="date" name="issued_from" class="form-control" value="{{ $filters['issued_from'] ?? '' }}">
                                <span class="input-group-text">to</span>
                                <input type="date" name="issued_to" class="form-control" value="{{ $filters['issued_to'] ?? '' }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Due between</label>
                            <div class="input-group">
                                <input type="date" name="due_from" class="form-control" value="{{ $filters['due_from'] ?? '' }}">
                                <span class="input-group-text">to</span>
                                <input type="date" name="due_to" class="form-control" value="{{ $filters['due_to'] ?? '' }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Status</label>
                            <select name="status" class="form-select">
                                <option value="all">All</option>
                                @foreach($statuses as $key => $meta)
                                    <option value="{{ $key }}" @selected(($filters['status'] ?? 'all') === $key)>{{ $meta['label'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">City</label>
                            <select name="city" class="form-select">
                                <option value="all">All</option>
                                @foreach($cities as $city)
                                    <option value="{{ $city }}" @selected(($filters['city'] ?? 'all') === $city)>{{ $city }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Type</label>
                            <select name="type" class="form-select">
                                <option value="all">All</option>
                                @foreach($invoiceTypes as $key => $label)
                                    <option value="{{ $key }}" @selected(($filters['type'] ?? 'all') === $key)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="d-flex gap-2 mt-3">
                        <button type="submit" class="btn btn-success px-4">Apply</button>
                        <a href="{{ route('admin.invoices.index') }}" class="btn btn-light">Clear</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Table or empty state --}}
    <div class="card billing-page-card border-0 shadow-sm">
        @if($invoices->isNotEmpty())
            <div class="billing-table-wrap table-responsive">
                <table class="table table-hover align-middle mb-0 billing-invoice-table">
                    <thead>
                        <tr>
                            <th style="width:36px"><input type="checkbox" class="form-check-input" id="check-all"></th>
                            <th>Issue Date <i class="ri-arrow-up-down-line text-muted fs-12"></i></th>
                            <th>Doc. No. <i class="ri-arrow-up-down-line text-muted fs-12"></i></th>
                            <th>Status</th>
                            <th>Client Name <i class="ri-arrow-up-down-line text-muted fs-12"></i></th>
                            <th>Due Date</th>
                            <th class="text-end">Tax</th>
                            <th class="text-end">Amount</th>
                            <th>Date of Payment</th>
                            <th class="text-end">Balance</th>
                            <th>Dr/Cr</th>
                            <th class="text-end" style="width:80px">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($invoices as $invoice)
                            @php $status = $invoice->statusMeta(); @endphp
                            <tr>
                                <td><input type="checkbox" class="form-check-input invoice-check" value="{{ $invoice->id }}"></td>
                                <td>
                                    <a href="{{ route('admin.invoices.index', array_merge(request()->query(), ['invoice' => $invoice->id])) }}" class="billing-client-link text-body">
                                        {{ $invoice->invoice_date->format('d M Y') }}
                                    </a>
                                </td>
                                <td>
                                    <a href="{{ route('admin.invoices.index', array_merge(request()->query(), ['invoice' => $invoice->id])) }}" class="billing-client-link fw-medium">
                                        {{ $invoice->invoice_number }}
                                    </a>
                                    <div class="billing-item-sub">{{ $invoice->typeLabel() }}</div>
                                </td>
                                <td>
                                    <span class="badge bg-{{ $status['color'] }}-subtle text-{{ $status['color'] }}">
                                        {{ $status['label'] }}
                                    </span>
                                </td>
                                <td>
                                    <a href="{{ route('admin.invoices.index', array_merge(request()->query(), ['invoice' => $invoice->id])) }}" class="billing-client-link text-body">
                                        {{ $invoice->customer->name ?? '—' }}
                                    </a>
                                </td>
                                <td>{{ $invoice->due_date?->format('d M Y') ?? '—' }}</td>
                                <td class="text-end">₹{{ number_format($invoice->total_tax, 2) }}</td>
                                <td class="text-end fw-medium">₹{{ number_format($invoice->grand_total, 2) }}</td>
                                <td>{{ $invoice->payment_date?->format('d M Y') ?? '—' }}</td>
                                <td class="text-end {{ $invoice->balance > 0 ? 'text-danger fw-medium' : 'text-muted' }}">
                                    ₹{{ number_format($invoice->balance, 2) }}
                                </td>
                                <td>
                                    @if($invoice->dr_cr !== '—')
                                        <span class="badge bg-{{ $invoice->dr_cr === 'Dr' ? 'danger' : 'success' }}-subtle text-{{ $invoice->dr_cr === 'Dr' ? 'danger' : 'success' }}">{{ $invoice->dr_cr }}</span>
                                    @else
                                        —
                                    @endif
                                </td>
                                <td class="text-end">
                                    <div class="d-flex gap-1 justify-content-end">
                                        <a href="{{ route('admin.invoices.index', array_merge(request()->query(), ['invoice' => $invoice->id])) }}" class="btn btn-sm btn-soft-info" title="View"><i class="ri-eye-line"></i></a>
                                        <a href="{{ route('admin.invoices.edit', $invoice) }}" class="btn btn-sm btn-soft-primary" title="Edit"><i class="ri-pencil-line"></i></a>
                                        <form action="{{ route('admin.invoices.destroy', $invoice) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this invoice?')">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-soft-danger" title="Delete"><i class="ri-delete-bin-line"></i></button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="card-body">
                <div class="billing-invoice-empty text-center py-4">
                    <h4 class="fw-semibold mb-2">Your clients will love your new invoices!</h4>
                    <p class="text-muted mx-auto mb-4" style="max-width:520px">
                        Sending amazing invoices and getting paid is easier than ever. Try our optimized templates and delivery system.
                    </p>
                    <div class="dropdown d-inline-block mb-5">
                        <button type="button" class="btn btn-primary btn-lg dropdown-toggle px-4" data-bs-toggle="dropdown">
                            <i class="ri-add-line me-1"></i> Create New Invoice
                        </button>
                        <ul class="dropdown-menu billing-invoice-new-menu shadow">
                            @foreach($createTypes as $typeKey => $meta)
                                <li>
                                    <a class="dropdown-item py-2" href="{{ route('admin.invoices.create', ['type' => $typeKey]) }}">
                                        <i class="{{ $meta['icon'] }} me-2 text-primary"></i>
                                        <span class="fw-medium">{{ $meta['label'] }}</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    @include('admin.invoices.partials.lifecycle')

                    <div class="billing-invoice-features row g-3 mt-4 text-start">
                        @foreach($features as $feature)
                            <div class="col-md-6">
                                <div class="d-flex gap-2">
                                    <i class="ri-checkbox-circle-fill text-success fs-18 flex-shrink-0"></i>
                                    <span class="text-muted">{{ $feature }}</span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    </div>

    @if($invoices->isNotEmpty())
        <div class="mt-4">
            @include('admin.invoices.partials.lifecycle')
        </div>
    @endif
    @else
        {{-- Master-detail: invoice list + preview --}}
        <div class="billing-clients-split row g-0">
            <div class="col-lg-4 col-xl-3 billing-clients-sidebar">
                @include('admin.invoices.partials.sidebar-toolbar')

                <div class="billing-clients-sidebar__search px-2 pb-2">
                    <form method="GET" action="{{ route('admin.invoices.index') }}" class="billing-sidebar-search">
                        @foreach(request()->only([
                            'invoice', 'q', 'client_name', 'invoice_number', 'status', 'type', 'city', 'item_name',
                            'issued_from', 'issued_to', 'due_from', 'due_to',
                        ]) as $key => $val)
                            @if($val && $val !== 'all')<input type="hidden" name="{{ $key }}" value="{{ $val }}">@endif
                        @endforeach
                        <i class="ri-search-line"></i>
                        <input type="text" name="q" class="form-control form-control-sm" placeholder="Search invoices..." value="{{ $filters['q'] ?? '' }}">
                    </form>
                </div>

                <div class="billing-clients-sidebar__list">
                    @forelse($invoices as $inv)
                        @php $invStatus = $inv->statusMeta(); @endphp
                        <a href="{{ route('admin.invoices.index', array_merge(
                                request()->only([
                                    'q', 'client_name', 'invoice_number', 'status', 'type', 'city', 'item_name',
                                    'issued_from', 'issued_to', 'due_from', 'due_to',
                                ]),
                                ['invoice' => $inv->id]
                            )) }}"
                           class="billing-client-list-item billing-invoice-list-item {{ $selected && $selected->id === $inv->id ? 'is-active' : '' }}">
                            <div class="billing-client-list-item__avatar billing-client-list-item__avatar--invoice">
                                <i class="ri-file-list-3-line"></i>
                            </div>
                            <div class="billing-client-list-item__content">
                                <div class="billing-client-list-item__name">{{ $inv->invoice_number }}</div>
                                <div class="billing-client-list-item__sub">{{ $inv->customer->name ?? '—' }} · {{ $inv->invoice_date->format('d M Y') }}</div>
                            </div>
                            <div class="billing-client-list-item__balance text-end">
                                <div>₹{{ number_format($inv->grand_total, 2) }}</div>
                                <span class="badge bg-{{ $invStatus['color'] }}-subtle text-{{ $invStatus['color'] }} mt-1" style="font-size:0.65rem">{{ $invStatus['label'] }}</span>
                            </div>
                        </a>
                    @empty
                        <div class="p-3 text-muted small">No invoices match filters.</div>
                    @endforelse
                </div>
            </div>

            <div class="col-lg-8 col-xl-9 billing-clients-panel">
                @if($selected && isset($invoice))
                    <div class="billing-clients-panel__body billing-clients-panel__body--invoice-preview p-0">
                        @include('admin.invoices.partials.preview', [
                            'embedded' => true,
                            'closeUrl' => route('admin.invoices.index', request()->except('invoice')),
                            'createTypes' => $createTypes,
                        ])
                    </div>
                @endif
            </div>
        </div>
    @endif
</div>
@endsection

@push('styles')
@if($panelOpen ?? false)
<link href="{{ asset('css/billing-invoice-preview.css') }}" rel="stylesheet">
<link href="{{ asset('css/billing-invoice-document.css') }}" rel="stylesheet">
<link href="{{ asset('css/billing-invoice-print.css') }}" rel="stylesheet">
@endif
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const filterBtn = document.getElementById('btn-toggle-filters');
    const filterPanel = document.getElementById('invoice-filters');
    if (filterBtn && filterPanel) {
        filterBtn.addEventListener('click', function () {
            const collapse = bootstrap.Collapse.getOrCreateInstance(filterPanel);
            collapse.toggle();
        });
    }

    const checkAll = document.getElementById('check-all');
    if (checkAll) {
        checkAll.addEventListener('change', function () {
            document.querySelectorAll('.invoice-check').forEach(cb => cb.checked = this.checked);
        });
    }
});
</script>
@if($panelOpen ?? false)
@include('admin.invoices.partials.preview-scripts')
@endif
@endpush