@extends('layouts.main')
@section('title', 'Expenses')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item active">Expenses</li>
@endsection

@section('content')

    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    @endif

    <div class="row">
        <div class="col-12">
            <div class="card-box">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <h4 class="header-title">All Expenses</h4>
                    </div>
                    <div class="col-md-6 text-right">
                        <a href="{{ route('expenses.create') }}" class="btn btn-primary">
                            <i class="fe-plus mr-1"></i> Add New Expense
                        </a>
                        <a href="{{ route('expense.categories') }}" class="btn btn-secondary">
                            <i class="fe-settings mr-1"></i> Manage Categories
                        </a>
                    </div>
                </div>

                <!-- Summary Cards -->
                <div class="row mb-4">
                    @php
                        $totalExpenses = $expenses->sum('amount');
                        $categoryTotals = $expenses->groupBy('category_id')->map(function($items) {
                            return $items->sum('amount');
                        });
                    @endphp
                    <div class="col-md-4">
                        <div class="widget-rounded-circle card-box bg-light">
                            <div class="row align-items-center">
                                <div class="col-6">
                                    <div class="avatar-lg rounded-circle bg-soft-danger border-danger border">
                                        <i class="mdi mdi-cash-minus font-22 avatar-title text-danger"></i>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="text-right">
                                        <h3 class="text-dark mt-1">{{ number_format($totalExpenses, 2) }} €</h3>
                                        <p class="text-muted mb-1 text-truncate">Total Expenses</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="widget-rounded-circle card-box bg-light">
                            <div class="row align-items-center">
                                <div class="col-6">
                                    <div class="avatar-lg rounded-circle bg-soft-info border-info border">
                                        <i class="mdi mdi-format-list-bulleted font-22 avatar-title text-info"></i>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="text-right">
                                        <h3 class="text-dark mt-1">{{ $expenses->count() }}</h3>
                                        <p class="text-muted mb-1 text-truncate">Total Records</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="widget-rounded-circle card-box bg-light">
                            <div class="row align-items-center">
                                <div class="col-6">
                                    <div class="avatar-lg rounded-circle bg-soft-success border-success border">
                                        <i class="mdi mdi-tag-multiple font-22 avatar-title text-success"></i>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="text-right">
                                        <h3 class="text-dark mt-1">{{ $categories->count() }}</h3>
                                        <p class="text-muted mb-1 text-truncate">Categories</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Filter by Category -->
                <div class="row mb-3">
                    <div class="col-md-4">
                        <select id="category_filter" class="form-control select2">
                            <option value="">All Categories</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->name }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="table-responsive">
                    <table id="expenses_table" class="table table-bordered table-striped dt-responsive nowrap" style="width:100%">
                        <thead class="thead-light">
                            <tr>
                                <th>#</th>
                                <th>Date</th>
                                <th>Category</th>
                                <th>Description</th>
                                <th class="text-right">Amount (€)</th>
                                <th>Added By</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($expenses as $index => $expense)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ \Carbon\Carbon::parse($expense->expense_date)->format('d M Y') }}</td>
                                <td>
                                    <span class="badge badge-primary">{{ $expense->category->name }}</span>
                                </td>
                                <td>{{ $expense->description ?? '-' }}</td>
                                <td class="text-right font-weight-bold">{{ number_format($expense->amount, 2) }}</td>
                                <td>{{ $expense->createdBy->name ?? 'N/A' }}</td>
                                <td>
                                    <a href="{{ route('expenses.edit', $expense->id) }}" class="btn btn-sm btn-info">
                                        <i class="fe-edit"></i>
                                    </a>
                                    <button type="button" class="btn btn-sm btn-danger delete-expense" data-id="{{ $expense->id }}">
                                        <i class="fe-trash-2"></i>
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr class="bg-light">
                                <th colspan="4" class="text-right">Total:</th>
                                <th class="text-right">{{ number_format($totalExpenses, 2) }} €</th>
                                <th colspan="2"></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    var table = $('#expenses_table').DataTable({
        order: [[1, 'desc']],
        pageLength: 25
    });

    // Category filter
    $('#category_filter').on('change', function() {
        table.column(2).search(this.value).draw();
    });

    // Initialize select2
    $('.select2').select2();

    // Delete expense
    $(document).on('click', '.delete-expense', function() {
        var id = $(this).data('id');
        var row = $(this).closest('tr');

        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ route("expenses.delete") }}',
                    type: 'POST',
                    data: {
                        id: id,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.status === 'success') {
                            Swal.fire('Deleted!', response.message, 'success');
                            table.row(row).remove().draw();
                        } else {
                            Swal.fire('Error!', response.message, 'error');
                        }
                    },
                    error: function() {
                        Swal.fire('Error!', 'Something went wrong.', 'error');
                    }
                });
            }
        });
    });
});
</script>
@endpush