@extends('layouts.admin')

@section('title', 'Invoices')
@section('page-title', 'Invoices')
@section('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">Invoices</li>
@endsection

@section('content')
<!-- Filter Section -->
<div class="card card-primary card-outline mb-4">
    <div class="card-header">
        <h3 class="card-title">
            <i class="bi bi-funnel me-1"></i> Filter Invoices
        </h3>
        <div class="card-tools">
            <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
                <i class="bi bi-dash-lg"></i>
            </button>
        </div>
    </div>
    <div class="card-body">
        <form method="GET" action="{{ route('invoices.index') }}" class="row g-3 align-items-end">
            <div class="col-md-3">
                <label class="form-label"><i class="bi bi-search me-1"></i> Search</label>
                <input type="text" name="search" class="form-control" 
                       value="{{ request('search') }}" 
                       placeholder="Invoice #, Customer, Email">
            </div>
            <div class="col-md-2">
                <label class="form-label"><i class="bi bi-tag me-1"></i> Type</label>
                <select name="type" class="form-select">
                    <option value="">All</option>
                    <option value="invoices" {{ request('type') == 'invoices' ? 'selected' : '' }}>Invoices</option>
                    <option value="quotations" {{ request('type') == 'quotations' ? 'selected' : '' }}>Quotations</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label"><i class="bi bi-circle me-1"></i> Status</label>
                <select name="status" class="form-select">
                    <option value="">All Status</option>
                    <option value="quotation" {{ request('status') == 'quotation' ? 'selected' : '' }}>Quotation</option>
                    <option value="invoice" {{ request('status') == 'invoice' ? 'selected' : '' }}>Invoice</option>
                    <option value="paid" {{ request('status') == 'paid' ? 'selected' : '' }}>Paid</option>
                    <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label"><i class="bi bi-calendar me-1"></i> Date From</label>
                <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}">
            </div>
            <div class="col-md-2">
                <label class="form-label"><i class="bi bi-calendar me-1"></i> Date To</label>
                <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}">
            </div>
            <div class="col-md-1">
                <div class="d-flex gap-1">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-search"></i>
                    </button>
                    <a href="{{ route('invoices.index') }}" class="btn btn-secondary">
                        <i class="bi bi-arrow-counterclockwise"></i>
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Results Section -->
<div class="card card-primary card-outline mb-4">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div>
                <h3 class="card-title">
                    <i class="bi bi-file-earmark-text me-1"></i> 
                    @if(request('type') == 'quotations')
                        Quotations
                    @elseif(request('type') == 'invoices')
                        Invoices
                    @else
                        All Invoices
                    @endif
                    <span class="badge text-bg-primary ms-2">
                        <i class="bi bi-hash"></i> {{ $invoices->total() }}
                    </span>
                </h3>
            </div>
            <div class="card-tools">
                <div class="d-flex gap-1">
                    @if(request('type') == 'quotations')
                        <a href="{{ route('invoices.create') }}?status=quotation" class="btn btn-warning btn-sm">
                            <i class="bi bi-plus-lg me-1"></i> New Quotation
                        </a>
                    @else
                        <a href="{{ route('invoices.create') }}" class="btn btn-success btn-sm">
                            <i class="bi bi-plus-lg me-1"></i> Create Invoice
                        </a>
                        <a href="{{ route('invoices.create') }}?status=quotation" class="btn btn-warning btn-sm">
                            <i class="bi bi-plus-lg me-1"></i> Create Quotation
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div class="card-body table-responsive p-0">
        <table class="table table-hover table-striped align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>Invoice #</th>
                    <th>Customer</th>
                    <th>Date</th>
                    <th>Due Date</th>
                    <th>Status</th>
                    <th>Total</th>
                    <th class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($invoices as $invoice)
                    <tr>
                        <td>{{ $invoices->firstItem() + $loop->index }}</td>
                        <td>
                            <strong>{{ $invoice->invoice_number }}</strong>
                            @if($invoice->original_quotation_id)
                                <br>
                                <small class="text-body-secondary">
                                    <i class="bi bi-arrow-repeat me-1"></i> Converted
                                </small>
                            @endif
                            @if($invoice->client)
                                <br>
                                <small class="text-body-secondary">
                                    <i class="bi bi-person me-1"></i> {{ $invoice->client->name }}
                                </small>
                            @endif
                        </td>
                        <td>
                            <strong>{{ $invoice->customer_name }}</strong>
                            <br>
                            <small class="text-body-secondary">
                                <i class="bi bi-envelope me-1"></i> {{ $invoice->customer_email }}
                            </small>
                            @if($invoice->customer_phone)
                                <br>
                                <small class="text-body-secondary">
                                    <i class="bi bi-telephone me-1"></i> {{ $invoice->customer_phone }}
                                </small>
                            @endif
                        </td>
                        <td>
                            {{ $invoice->invoice_date->format('d/m/Y') }}
                            <br>
                            <small class="text-body-secondary">{{ $invoice->invoice_date->diffForHumans() }}</small>
                        </td>
                        <td>
                            @if($invoice->due_date)
                                {{ $invoice->due_date->format('d/m/Y') }}
                                @if($invoice->due_date->isPast() && !$invoice->isPaid() && !$invoice->isCancelled())
                                    <br>
                                    <span class="badge text-bg-danger">Overdue</span>
                                @endif
                            @else
                                <span class="text-body-secondary">N/A</span>
                            @endif
                        </td>
                        <td>
                            <span class="badge text-bg-{{ $invoice->status_color }}">
                                <i class="bi 
                                    @if($invoice->status == 'quotation') bi-file-earmark-text 
                                    @elseif($invoice->status == 'invoice') bi-file-earmark-spreadsheet 
                                    @elseif($invoice->status == 'paid') bi-check-circle 
                                    @else bi-x-circle @endif me-1">
                                </i>
                                {{ $invoice->status_label }}
                            </span>
                            @if($invoice->status == 'paid')
                                <br>
                                <small class="text-success">
                                    <i class="bi bi-check me-1"></i> Paid
                                </small>
                            @endif
                        </td>
                        <td>
                            <strong>RM {{ number_format($invoice->total, 2) }}</strong>
                            <br>
                            <small class="text-body-secondary">
                                {{ $invoice->items->count() }} item(s)
                            </small>
                        </td>
                        <td>
                            <div class="d-flex flex-wrap justify-content-center gap-1">
                                <!-- View -->
                                <a href="{{ route('invoices.show', $invoice) }}" class="btn btn-info btn-sm text-white" title="View">
                                    <i class="bi bi-eye"></i>
                                </a>
                                
                                <!-- Edit -->
                                @if($invoice->isQuotation() || $invoice->isCancelled())
                                    <a href="{{ route('invoices.edit', $invoice) }}" class="btn btn-primary btn-sm" title="Edit">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                @endif
                                
                                <!-- PDF Download -->
                                <a href="{{ route('invoices.download-pdf', $invoice) }}" class="btn btn-danger btn-sm" title="Download PDF">
                                    <i class="bi bi-file-earmark-pdf"></i>
                                </a>
                                
                                <!-- Print -->
                                <a href="{{ route('invoices.print', $invoice) }}" target="_blank" class="btn btn-secondary btn-sm" title="Print">
                                    <i class="bi bi-printer"></i>
                                </a>
                                
                                <!-- Convert to Invoice -->
                                @if($invoice->canBeConvertedToInvoice())
                                    <form action="{{ route('invoices.convert', $invoice) }}" method="POST" class="d-inline">
                                        @csrf
                                        <button type="submit" class="btn btn-success btn-sm" 
                                                onclick="return confirm('Convert this quotation to invoice?')" 
                                                title="Convert to Invoice">
                                            <i class="bi bi-arrow-repeat"></i>
                                        </button>
                                    </form>
                                @endif
                                
                                <!-- Mark as Paid -->
                                @if($invoice->canBePaid())
                                    <form action="{{ route('invoices.paid', $invoice) }}" method="POST" class="d-inline">
                                        @csrf
                                        <button type="submit" class="btn btn-success btn-sm" 
                                                onclick="return confirm('Mark as paid?')" 
                                                title="Mark as Paid">
                                            <i class="bi bi-check-lg"></i>
                                        </button>
                                    </form>
                                @endif
                                
                                <!-- Cancel -->
                                @if($invoice->canBeCancelled())
                                    <form action="{{ route('invoices.cancel', $invoice) }}" method="POST" class="d-inline">
                                        @csrf
                                        <button type="submit" class="btn btn-warning btn-sm" 
                                                onclick="return confirm('Cancel this invoice?')" 
                                                title="Cancel">
                                            <i class="bi bi-x-lg"></i>
                                        </button>
                                    </form>
                                @endif
                                
                                <!-- Delete -->
                                @if($invoice->isQuotation() || $invoice->isCancelled())
                                    <form action="{{ route('invoices.destroy', $invoice) }}" method="POST" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm" 
                                                onclick="return confirm('Delete this invoice?')" 
                                                title="Delete">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center py-5">
                            <div class="py-4">
                                <i class="bi bi-file-earmark-text text-body-secondary mb-3 display-4 d-block"></i>
                                <h4 class="text-body-secondary">No Invoices Found</h4>
                                <p class="text-body-secondary">Start creating invoices or quotations for your clients.</p>
                                <div class="d-flex justify-content-center gap-2">
                                    <a href="{{ route('invoices.create') }}" class="btn btn-success">
                                        <i class="bi bi-plus-lg me-1"></i> Create Invoice
                                    </a>
                                    <a href="{{ route('invoices.create') }}?status=quotation" class="btn btn-warning">
                                        <i class="bi bi-plus-lg me-1"></i> Create Quotation
                                    </a>
                                </div>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="card-footer">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div>
                <span class="text-body-secondary">
                    Showing {{ $invoices->firstItem() ?? 0 }} to {{ $invoices->lastItem() ?? 0 }} 
                    of {{ $invoices->total() }} invoices
                </span>
                <span class="ms-3 d-inline-flex gap-1 flex-wrap">
                    <span class="badge text-bg-warning">
                        <i class="bi bi-file-earmark-text me-1"></i> {{ $invoices->where('status', 'quotation')->count() }} Quotations
                    </span>
                    <span class="badge text-bg-info">
                        <i class="bi bi-file-earmark-spreadsheet me-1"></i> {{ $invoices->where('status', 'invoice')->count() }} Invoices
                    </span>
                    <span class="badge text-bg-success">
                        <i class="bi bi-check-circle me-1"></i> {{ $invoices->where('status', 'paid')->count() }} Paid
                    </span>
                    <span class="badge text-bg-danger">
                        <i class="bi bi-x-circle me-1"></i> {{ $invoices->where('status', 'cancelled')->count() }} Cancelled
                    </span>
                </span>
            </div>
            <div>
                {{ $invoices->appends(request()->query())->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Auto-submit filter on select change
    document.querySelectorAll('select[name="type"], select[name="status"]').forEach(element => {
        element.addEventListener('change', function () {
            this.closest('form').submit();
        });
    });

    // Submit on enter key for search
    const searchInput = document.querySelector('input[name="search"]');
    if (searchInput) {
        searchInput.addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                this.closest('form').submit();
            }
        });
    }
});
</script>
@endsection