{{-- resources/views/expenses/index.blade.php --}}
@extends('layouts.app')

@section('title', 'Expenses')
@section('header', 'Expense Management')

@section('content')
<style>
    .stat-card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        transition: transform 0.3s;
    }
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }
    .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-bottom: 15px;
    }
    .stat-value {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    .stat-label {
        color: #6c757d;
        font-size: 14px;
    }
</style>

<div class="row mb-4">
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                <i class="fas fa-dollar-sign"></i>
            </div>
            <div class="stat-value">${{ number_format($totalExpenses ?? 0, 2) }}</div>
            <div class="stat-label">Total Expenses</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white;">
                <i class="fas fa-calendar-month"></i>
            </div>
            <div class="stat-value">${{ number_format($monthlyExpenses ?? 0, 2) }}</div>
            <div class="stat-label">This Month</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white;">
                <i class="fas fa-clock"></i>
            </div>
            <div class="stat-value">${{ number_format($pendingExpenses ?? 0, 2) }}</div>
            <div class="stat-label">Pending Approval</div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">
            <i class="fas fa-list me-2"></i>All Expenses
        </h5>
        <a href="{{ route('expenses.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Add Expense
        </a>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered" id="expensesTable">
                <thead>
                    <tr>
                        <th>Expense No</th>
                        <th>Title</th>
                        <th>Category</th>
                        <th>Date</th>
                        <th>Amount</th>
                        <th>Payment</th>
                        <th>Status</th>
                        <th>Created By</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($expenses as $expense)
                    <tr>
                        <td>{{ $expense->expense_no }}</td>
                        <td>{{ $expense->title }}</td>
                        <td>{{ $expense->category->name ?? 'N/A' }}</td>
                        <td>{{ $expense->expense_date->format('Y-m-d') }}</td>
                        <td>${{ number_format($expense->amount, 2) }}</td>
                        <td>
                            <span class="badge bg-info">{{ ucfirst($expense->payment_method) }}</span>
                        </td>
                        <td>
                            @if($expense->status == 'approved')
                                <span class="badge bg-success">Approved</span>
                            @elseif($expense->status == 'pending')
                                <span class="badge bg-warning">Pending</span>
                            @else
                                <span class="badge bg-danger">Rejected</span>
                            @endif
                        </td>
                        <td>{{ $expense->user->name }}</td>
                        <td>
                            <div class="btn-group" role="group">
                                <a href="{{ route('expenses.show', $expense) }}" class="btn btn-sm btn-info" title="View">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('expenses.edit', $expense) }}" class="btn btn-sm btn-warning" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                @if($expense->status == 'pending')
                                    <button type="button" class="btn btn-sm btn-success approve-expense" data-id="{{ $expense->id }}" title="Approve">
                                        <i class="fas fa-check"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-danger reject-expense" data-id="{{ $expense->id }}" title="Reject">
                                        <i class="fas fa-times"></i>
                                    </button>
                                @endif
                                <button type="button" class="btn btn-sm btn-danger delete-expense" data-id="{{ $expense->id }}" title="Delete">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                            
                            <form id="approve-form-{{ $expense->id }}" action="{{ route('expenses.approve', $expense) }}" method="POST" style="display: none;">
                                @csrf
                                @method('PUT')
                            </form>
                            <form id="reject-form-{{ $expense->id }}" action="{{ route('expenses.reject', $expense) }}" method="POST" style="display: none;">
                                @csrf
                                @method('PUT')
                            </form>
                            <form id="delete-form-{{ $expense->id }}" action="{{ route('expenses.destroy', $expense) }}" method="POST" style="display: none;">
                                @csrf
                                @method('DELETE')
                            </form>
                        </td>
                    </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center">No expenses found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        {{ $expenses->links() }}
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    $('#expensesTable').DataTable({
        pageLength: 15,
        responsive: true,
        order: [[3, 'desc']]
    });
    
    $('.approve-expense').click(function() {
        const id = $(this).data('id');
        Swal.fire({
            title: 'Approve Expense?',
            text: "Are you sure you want to approve this expense?",
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, approve!'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('approve-form-' + id).submit();
            }
        });
    });
    
    $('.reject-expense').click(function() {
        const id = $(this).data('id');
        Swal.fire({
            title: 'Reject Expense?',
            text: "Are you sure you want to reject this expense?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, reject!'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('reject-form-' + id).submit();
            }
        });
    });
    
    $('.delete-expense').click(function() {
        const id = $(this).data('id');
        Swal.fire({
            title: 'Delete Expense?',
            text: "This action cannot be undone!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete!'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('delete-form-' + id).submit();
            }
        });
    });
});
</script>
@endpush
@endsection