@extends('layouts.main')
@section('title', 'Expense Categories')

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

@section('content')

    <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">Expense Categories</h4>
                        <p class="text-muted">Manage expense categories and set target amounts for fundraising</p>
                    </div>
                    <div class="col-md-6 text-right">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addCategoryModal">
                            <i class="fe-plus mr-1"></i> Add Category
                        </button>
                        <a href="{{ route('expenses.index') }}" class="btn btn-secondary">
                            <i class="fe-arrow-left mr-1"></i> Back to Expenses
                        </a>
                    </div>
                </div>

                <div class="table-responsive">
                    <table id="categories_table" class="table table-bordered table-striped dt-responsive nowrap" style="width:100%">
                        <thead class="thead-light">
                            <tr>
                                <th>#</th>
                                <th>Category Name</th>
                                <th>Description</th>
                                <th class="text-right">Target Amount (€)</th>
                                <th class="text-right">Total Spent (€)</th>
                                <th class="text-center">Expense Count</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($categories as $index => $category)
                            <tr data-id="{{ $category->id }}">
                                <td>{{ $index + 1 }}</td>
                                <td class="category-name"><strong>{{ $category->name }}</strong></td>
                                <td class="category-description">{{ $category->description ?? '-' }}</td>
                                <td class="text-right category-target">{{ number_format($category->target_amount, 2) }}</td>
                                <td class="text-right">
                                    <span class="text-danger font-weight-bold">{{ number_format($category->expenses_sum_amount ?? 0, 2) }}</span>
                                </td>
                                <td class="text-center">
                                    <span class="badge badge-info">{{ $category->expenses_count ?? 0 }}</span>
                                </td>
                                <td>
                                    @if($category->is_active)
                                        <span class="badge badge-success">Active</span>
                                    @else
                                        <span class="badge badge-secondary">Inactive</span>
                                    @endif
                                </td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-info edit-category" 
                                            data-id="{{ $category->id }}"
                                            data-name="{{ $category->name }}"
                                            data-description="{{ $category->description }}"
                                            data-target="{{ $category->target_amount }}">
                                        <i class="fe-edit"></i>
                                    </button>
                                    @if(($category->expenses_count ?? 0) == 0)
                                    <button type="button" class="btn btn-sm btn-danger delete-category" data-id="{{ $category->id }}">
                                        <i class="fe-trash-2"></i>
                                    </button>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr class="bg-light">
                                <th colspan="3" class="text-right">Totals:</th>
                                <th class="text-right">{{ number_format($categories->sum('target_amount'), 2) }} €</th>
                                <th class="text-right text-danger">{{ number_format($categories->sum('expenses_sum_amount'), 2) }} €</th>
                                <th class="text-center">{{ $categories->sum('expenses_count') }}</th>
                                <th colspan="2"></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Category Modal -->
    <div class="modal fade" id="addCategoryModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add New Category</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="addCategoryForm">
                        <div class="form-group">
                            <label for="add_name">Category Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="add_name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="add_description">Description</label>
                            <textarea class="form-control" id="add_description" name="description" rows="2"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="add_target_amount">Target Amount (€)</label>
                            <input type="number" step="0.01" min="0" class="form-control" id="add_target_amount" name="target_amount" value="0">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="saveCategory">Save Category</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Category Modal -->
    <div class="modal fade" id="editCategoryModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Category</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="editCategoryForm">
                        <input type="hidden" id="edit_id" name="id">
                        <div class="form-group">
                            <label for="edit_name">Category Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="edit_name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="edit_description">Description</label>
                            <textarea class="form-control" id="edit_description" name="description" rows="2"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="edit_target_amount">Target Amount (€)</label>
                            <input type="number" step="0.01" min="0" class="form-control" id="edit_target_amount" name="target_amount">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="updateCategory">Update Category</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    var table = $('#categories_table').DataTable({
        paging: false,
        searching: false
    });

    // Add Category
    $('#saveCategory').on('click', function() {
        var name = $('#add_name').val();
        var description = $('#add_description').val();
        var target_amount = $('#add_target_amount').val();

        if (!name) {
            Swal.fire('Error', 'Category name is required', 'error');
            return;
        }

        $.ajax({
            url: '{{ url("/expense-categories/add") }}',
            type: 'POST',
            data: {
                name: name,
                description: description,
                target_amount: target_amount,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.status === 'success') {
                    Swal.fire('Success', response.message, 'success').then(function() {
                        location.reload();
                    });
                } else {
                    Swal.fire('Error', response.message, 'error');
                }
            },
            error: function() {
                Swal.fire('Error', 'Something went wrong', 'error');
            }
        });
    });

    // Open Edit Modal
    $(document).on('click', '.edit-category', function() {
        $('#edit_id').val($(this).data('id'));
        $('#edit_name').val($(this).data('name'));
        $('#edit_description').val($(this).data('description'));
        $('#edit_target_amount').val($(this).data('target'));
        $('#editCategoryModal').modal('show');
    });

    // Update Category
    $('#updateCategory').on('click', function() {
        var id = $('#edit_id').val();
        var name = $('#edit_name').val();
        var description = $('#edit_description').val();
        var target_amount = $('#edit_target_amount').val();

        if (!name) {
            Swal.fire('Error', 'Category name is required', 'error');
            return;
        }

        $.ajax({
            url: '{{ url("/expense-categories/edit") }}',
            type: 'POST',
            data: {
                id: id,
                name: name,
                description: description,
                target_amount: target_amount,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.status === 'success') {
                    Swal.fire('Success', response.message, 'success').then(function() {
                        location.reload();
                    });
                } else {
                    Swal.fire('Error', response.message, 'error');
                }
            },
            error: function() {
                Swal.fire('Error', 'Something went wrong', 'error');
            }
        });
    });

    // Delete Category
    $(document).on('click', '.delete-category', function() {
        var id = $(this).data('id');

        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: '{{ url("/expense-categories/delete") }}',
                    type: 'POST',
                    data: {
                        id: id,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.status === 'success') {
                            Swal.fire('Deleted!', response.message, 'success').then(function() {
                                location.reload();
                            });
                        } else {
                            Swal.fire('Error!', response.message, 'error');
                        }
                    },
                    error: function() {
                        Swal.fire('Error!', 'Something went wrong.', 'error');
                    }
                });
            }
        });
    });
});
</script>
@endpush