@extends('layouts.app')
@section('title', 'Invoice Management')

@section('content')
<div class="content-wrapper">
    <div class="row">
        <!-- Total Paid Box -->
        <div class="col-md-6 grid-margin stretch-card">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4 class="font-weight-normal mb-0">{{ __('invoice_page.total_paid') }}</h4>
                        <div class="icon-holder">
                            <i class="mdi mdi-cash-multiple mdi-36px"></i>
                        </div>
                    </div>
                    <h2 class="font-weight-bold mt-3 mb-0">Rp. {{ number_format($totalPaid, 0, ',', '.') }}</h2>
                </div>
            </div>
        </div>

        <!-- Total Unpaid Box -->
        <div class="col-md-6 grid-margin stretch-card">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4 class="font-weight-normal mb-0">{{ __('invoice_page.total_unpaid') }}</h4>
                        <div class="icon-holder">
                            <i class="mdi mdi-cash-remove mdi-36px"></i>
                        </div>
                    </div>
                    <h2 class="font-weight-bold mt-3 mb-0">Rp. {{ number_format($totalUnpaid, 0, ',', '.') }}</h2>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <div>
                            <h4 class="card-title mb-0">
                                @if(Auth::user()->hasRole('customer'))
                                    My Invoices
                                @else
                                    Invoice List
                                @endif
                            </h4>
                            @if(Auth::user()->hasRole('customer'))
                                <p class="text-muted mb-0">View and manage your invoices and shipments</p>
                            @endif
                        </div>
                        <div>
                            @can('invoice-create')
                                <a href="{{ route('invoice.create') }}" class="btn btn-outline-primary">
                                    <i class="mdi mdi-plus"></i>
                                    @if(Auth::user()->hasRole('customer'))
                                        Request Invoice
                                    @else
                                        Create New Invoice
                                    @endif
                                </a>
                            @endcan
                        </div>
                    </div>

                    @include('layouts.partials.flash')

                    <div class="mb-4">
                        <button type="button" class="btn btn-filter" data-status="all">All</button>
                        <button type="button" class="btn btn-filter" data-status="paid">Paid</button>
                        <button type="button" class="btn btn-filter" data-status="unpaid">
                            @if(Auth::user()->hasRole('customer'))
                                Pending Invoice
                            @else
                                Bill not yet Invoiced
                            @endif
                        </button>
                    </div>

                    <div class="table-responsive">
                        <table id="invoices-table" class="table table-striped">
                            <!-- Table structure will be built dynamically by JavaScript -->
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer')
<script type="text/javascript">
// Add error handler to better catch DataTables errors
$.fn.dataTable.ext.errMode = 'throw';

$(function () {
    // Define columns for invoices view (8 columns)
    var invoiceColumns = [
        {data: 'invoice_number', name: 'invoice_number'},
        {data: 'customer_name', name: 'customer_name'},
        {data: 'shipment_number', name: 'shipment_number'},
        {data: 'invoice_date', name: 'invoice_date', render: function(data) {
            return data ? new Date(data).toLocaleDateString() : 'N/A';
        }},
        {data: 'due_date', name: 'due_date', render: function(data) {
            return data ? new Date(data).toLocaleDateString() : 'N/A';
        }},
        {data: 'total_amount', name: 'total_amount', render: function(data) {
            return 'Rp. ' + new Intl.NumberFormat('id-ID').format(data);
        }},
        {data: 'status_label', name: 'status_label'},
        {data: 'action', name: 'action', orderable: false, searchable: false}
    ];

    // Define columns for shipments view (7 columns)
    var shipmentColumns = [
        {data: 'tracking_number', name: 'tracking_number'},
        {data: 'customer_name', name: 'customer_name'},
        {data: 'date', name: 'date'},
        {data: 'origin_destination', name: 'origin_destination'},
        {data: 'amount', name: 'amount', render: function(data) {
            return 'Rp. ' + new Intl.NumberFormat('id-ID').format(data);
        }},
        {data: 'status', name: 'status'},
        {data: 'action', name: 'action', orderable: false, searchable: false}
    ];

    // Make the "all" filter active by default if no filter is active
    if (!$('button.btn-filter.active').length) {
        $('button.btn-filter[data-status="all"]').addClass('active btn-primary').removeClass('btn-outline-primary');
    }

    // Determine initial filter status after ensuring one is active
    var initialStatus = $('button.btn-filter.active').data('status') || 'all';

    // Set columns based on initial status
    var currentColumns = initialStatus === 'unpaid' ? shipmentColumns : invoiceColumns;

    // Set initial table structure based on the active filter
    if (initialStatus === 'unpaid') {
        // Build shipments table structure (7 columns)
        $('#invoices-table').html(
            '<thead>' +
                '<tr>' +
                    '<th>Tracking #</th>' +
                    '<th>Customer</th>' +
                    '<th>Date</th>' +
                    '<th>Rate Plan</th>' +
                    '<th>{{ __('dashboard_page.amount') }}</th>' +
                    '<th>Status</th>' +
                    '<th>Action</th>' +
                '</tr>' +
            '</thead>' +
            '<tbody></tbody>'
        );
    } else {
        // Build invoices table structure (8 columns)
        $('#invoices-table').html(
            '<thead>' +
                '<tr>' +
                    '<th>Invoice #</th>' +
                    '<th>Customer</th>' +
                    '<th>Shipment #</th>' +
                    '<th>{{ __('invoice_page.invoice_date') }}</th>' +
                    '<th>{{ __('invoice_page.due_date') }}</th>' +
                    '<th>{{ __('invoice_page.total_amount') }}</th>' +
                    '<th>Status</th>' +
                    '<th>Action</th>' +
                '</tr>' +
            '</thead>' +
            '<tbody></tbody>'
        );
    }

    // Initialize DataTable with safe defaults first
    var table;

    // Use a try-catch block to handle any initialization errors
    try {
        console.log('Initializing DataTable with status:', initialStatus);
        console.log('Columns count:', currentColumns.length);

        table = $('#invoices-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('invoices.data') }}",
                data: function(d) {
                    d.status = $('button.btn-filter.active').data('status') || 'all';
                },
                error: function(xhr, error, thrown) {
                    console.error('DataTables AJAX error:', error, thrown);
                }
            },
            columns: currentColumns,
            language: {
                processing: "Loading data...",
                search: "Search:",
                lengthMenu: "Show _MENU_ entries",
                info: "Showing _START_ to _END_ of _{{ __('invoice_page.total') }}_ entries",
                infoEmpty: "Showing 0 to 0 of 0 entries",
                infoFiltered: "(filtered from _MAX_ total entries)",
                zeroRecords: "No matching records found"
            }
        });

        console.log('DataTable initialized successfully');
    } catch (e) {
        console.error("DataTables initialization error:", e);
        alert('Failed to initialize table. Please refresh the page.');
    }

    // We already set default filter above, no need to do it again

    // Filter button click
    $('button.btn-filter').click(function() {
        var status = $(this).data('status');

        // Don't reapply the same filter
        if ($(this).hasClass('active')) {
            return;
        }

        // Update active button
        $('button.btn-filter').removeClass('active btn-primary').addClass('btn-outline-primary');
        $(this).removeClass('btn-outline-primary').addClass('active btn-primary');

        try {
            console.log('Switching to status:', status);

            // Destroy existing table completely
            if ($.fn.DataTable.isDataTable('#invoices-table')) {
                table.destroy();
                $('#invoices-table').empty(); // Clear all content
            }

            // Set the appropriate columns based on status
            if (status === 'unpaid') {
                currentColumns = shipmentColumns;
                console.log('Using shipment columns, count:', currentColumns.length);
                // Rebuild table HTML for shipments (7 columns)
                $('#invoices-table').html(
                    '<thead>' +
                        '<tr>' +
                            '<th>Tracking #</th>' +
                            '<th>Customer</th>' +
                            '<th>Date</th>' +
                            '<th>Rate Plan</th>' +
                            '<th>{{ __('dashboard_page.amount') }}</th>' +
                            '<th>Status</th>' +
                            '<th>Action</th>' +
                        '</tr>' +
                    '</thead>' +
                    '<tbody></tbody>'
                );
            } else {
                currentColumns = invoiceColumns;
                console.log('Using invoice columns, count:', currentColumns.length);
                // Rebuild table HTML for invoices (8 columns)
                $('#invoices-table').html(
                    '<thead>' +
                        '<tr>' +
                            '<th>Invoice #</th>' +
                            '<th>Customer</th>' +
                            '<th>Shipment #</th>' +
                            '<th>{{ __('invoice_page.invoice_date') }}</th>' +
                            '<th>{{ __('invoice_page.due_date') }}</th>' +
                            '<th>{{ __('invoice_page.total_amount') }}</th>' +
                            '<th>Status</th>' +
                            '<th>Action</th>' +
                        '</tr>' +
                    '</thead>' +
                    '<tbody></tbody>'
                );
            }

            // Recreate the table with the appropriate columns
            table = $('#invoices-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('invoices.data') }}",
                    data: function(d) {
                        d.status = status;
                    },
                    error: function(xhr, error, thrown) {
                        console.error('DataTables AJAX error:', error, thrown);
                    }
                },
                columns: currentColumns,
                language: {
                    processing: "Loading data...",
                    search: "Search:",
                    lengthMenu: "Show _MENU_ entries",
                    info: "Showing _START_ to _END_ of _{{ __('invoice_page.total') }}_ entries",
                    infoEmpty: "Showing 0 to 0 of 0 entries",
                    infoFiltered: "(filtered from _MAX_ total entries)",
                    zeroRecords: "No matching records found"
                }
            });

            console.log('Table recreated successfully');
        } catch (e) {
            console.error('Error recreating DataTable:', e);
            alert('An error occurred while switching filters. Please refresh the page.');
        }
    });
});
</script>
<style>
.btn-filter {
    margin-right: 5px;
}
.btn-filter.active {
    font-weight: bold;
}
.table-responsive {
    overflow-x: auto;
}
</style>
@endsection