@extends('layouts.app')

@section('title', 'Invoice Management - Quick OMS')

@section('content')
<div class="welcome">
    <div>
        <h3>Invoice Management</h3>
        <p>Generate, view, and manage invoices</p>
    </div>
</div>

<div class="cards_4box">
    <!-- TOTAL REVENUE -->
    <div class="card blue">
        <div>
            <h4>Total Revenue</h4>
            <h2>${{ number_format($revenue, 2) }}</h2>
            <p>Approved & Closed</p>
        </div>
        <div class="icon blue">
            <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 0C8.50684 0 0 8.50684 0 19C0 29.4932 8.50684 38 19 38C29.4932 38 38 29.4932 38 19C38 8.50684 29.4932 0 19 0ZM19 34.2C10.6055 34.2 3.8 27.3945 3.8 19C3.8 10.6055 10.6055 3.8 19 3.8C27.3945 3.8 34.2 10.6055 34.2 19C34.2 27.3945 27.3945 34.2 19 34.2ZM24.7 13.3H13.3V15.2H24.7V13.3ZM24.7 17.1H13.3V19H24.7V17.1ZM24.7 20.9H13.3V22.8H24.7V20.9ZM24.7 24.7H13.3V26.6H24.7V24.7Z" fill="#0D5DD6" />
            </svg>
        </div>
    </div>

    <!-- PAID INVOICES -->
    <div class="card green">
        <div>
            <h4>Paid Invoices</h4>
            <h2>{{ number_format($dashboardPaidCount) }}</h2>
            <p>Successfully closed</p>
        </div>
        <div class="icon green">
            <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 0C8.50684 0 0 8.50684 0 19C0 29.4932 8.50684 38 19 38C29.4932 38 38 29.4932 38 19C38 8.50684 29.4932 0 19 0ZM26.6 15.2L17.1 24.7L11.4 19L14.06 16.34L17.1 19.38L23.94 12.54L26.6 15.2Z" fill="#00A63E" />
            </svg>
        </div>
    </div>

    <!-- UNPAID INVOICES -->
    <div class="card orange">
        <div>
            <h4>Unpaid Invoices</h4>
            <h2>{{ number_format($dashboardUnpaidCount) }}</h2>
            <p>Draft & Approved</p>
        </div>
        <div class="icon orange">
            <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 0C8.50684 0 0 8.50684 0 19C0 29.4932 8.50684 38 19 38C29.4932 38 38 29.4932 38 19C38 8.50684 29.4932 0 19 0ZM19 28.5C18.4727 28.5 18.05 28.0773 18.05 27.55V22.8C18.05 22.2727 18.4727 21.85 19 21.85C19.5273 21.85 19.95 22.2727 19.95 22.8V27.55C19.95 28.0773 19.5273 28.5 19 28.5ZM19 19.95C18.4727 19.95 18.05 19.5273 18.05 19V9.5C18.05 8.97266 18.4727 8.55 19 8.5C19.5273 8.5 19.95 8.97266 19.95 9.5V19C19.95 19.5273 19.5273 19.95 19 19.95Z" fill="#FE7614" />
            </svg>
        </div>
    </div>

    <!-- CONVERTED (TOTAL) -->
    <div class="card blue">
        <div>
            <h4>Converted</h4>
            <h2>{{ number_format($convertedCount) }}</h2>
            <p>Total invoices generated</p>
        </div>
        <div class="icon blue">
            <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 0C8.50684 0 0 8.50684 0 19C0 29.4932 8.50684 38 19 38C29.4932 38 38 29.4932 38 19C38 8.50684 29.4932 0 19 0ZM26.6 24.7H11.4V22.8H26.6V24.7ZM26.6 20.9H11.4V19H26.6V20.9ZM26.6 17.1H11.4V15.2H26.6V17.1ZM26.6 13.3H11.4V11.4H26.6V13.3Z" fill="#0D5DD6" />
            </svg>
        </div>
    </div>
</div>

<h3 class="heading">Invoices</h3>

<div class="box_filtter">
    <div class="left">
        <select class="select" id="filter_status">
            <option value="">All Statuses</option>
            @foreach($statuses as $status)
                <option value="{{ $status->id }}" {{ $status->id == $draftStatusId ? 'selected' : '' }}>{{ $status->name }}</option>
            @endforeach
        </select>
    </div>

    <div class="right">
        <button class="btn green" id="printAllBtn">
            Print Selected
        </button>
        <a href="{{ route('admin.invoices.create') }}" class="btn orange">
            + Create Invoice
        </a>
    </div>
</div>

<div class="top-bar">
    <div>
        Show
        <select id="length_change">
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
        </select>
        entries
    </div>

    <div class="search">
        <input id="search_box" placeholder="Search Invoice ID, Company or Client...">
    </div>
</div>

<div class="table-responsive">
    <table id="invoiceTable" class="display" style="width:100%">
        <thead>
            <tr>
                <th><input type="checkbox" id="selectAll"></th>
                <th>Invoice ID</th>
                <th>Company</th>
                <th>Client</th>
                <th>Issue Date</th>
                <th>Expiry Date</th>
                <th>Status</th>
                <th>Total</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

@push('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<style>
    .table-responsive { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); margin-top: 20px; }
    #invoiceTable { border-collapse: separate; border-spacing: 0 10px; }
    #invoiceTable thead th { background: #f8faff; color: #444; font-weight: 600; padding: 15px; border: none; }
    #invoiceTable tbody tr { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
    #invoiceTable tbody td { padding: 15px; border: none; vertical-align: middle; }
    .action-icons { display: flex; gap: 12px; align-items: center; }
    .action-icons i { font-size: 18px; }
    .dataTables_length, .dataTables_filter { display: none; }
    .heading { margin-top: 30px; font-family: 'Rajdhani', sans-serif; font-weight: 700; color: #1B79B5; }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@endpush

@push('scripts')
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
    const table = $('#invoiceTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('admin.invoices.index') }}",
            data: function (d) {
                d.status_id = $('#filter_status').val();
            }
        },
        columns: [
            {data: 'checkbox', name: 'checkbox', orderable: false, searchable: false},
            {data: 'invoice_number', name: 'invoice_number'},
            {data: 'company', name: 'company'},
            {data: 'client', name: 'client'},
            {data: 'issue_date', name: 'issue_date'},
            {data: 'expiry_date', name: 'expiry_date'},
            {data: 'status', name: 'status'},
            {data: 'total', name: 'total'},
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ],
        order: [[1, 'desc']],
        drawCallback: function() {
            // Checkbox logic
            $('#selectAll').on('click', function() {
                $('.invoice-checkbox').prop('checked', this.checked);
            });
        }
    });

    $('#length_change').on('change', function() {
        table.page.len(this.value).draw();
    });

    $('#search_box').on('keyup', function() {
        table.search(this.value).draw();
    });

    $('#filter_status').on('change', function() {
        table.ajax.reload();
    });

    $('#printAllBtn').on('click', function() {
        const ids = [];
        $('.invoice-checkbox:checked').each(function() {
            ids.push($(this).val());
        });
        if (ids.length === 0) {
            alert('Please select at least one invoice.');
            return;
        }
        window.location.href = "{{ route('admin.invoices.print-all') }}?ids=" + ids.join(',');
    });
});
</script>
@endpush
@endsection