@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">Expense Details</h1>
        <div>
            <a href="{{ route('expenses.edit', $expense->id) }}" class="btn btn-primary">
                <i class="fas fa-edit"></i> Edit
            </a>
            <a href="{{ route('expenses.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to List
            </a>
        </div>
    </div>

    <!-- Alert Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Expense Details Card -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">Expense Information</h6>
            <div>
                <span class="badge bg-{{ $expense->status == 'pending' ? 'warning' : ($expense->status == 'approved' ? 'success' : 'danger') }} text-white">
                    {{ ucfirst($expense->status) }}
                </span>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <table class="table table-borderless">
                        <tr>
                            <th width="30%">Description:</th>
                            <td>{{ $expense->description }}</td>
                        </tr>
                        <tr>
                            <th>Category:</th>
                            <td>{{ ucfirst($expense->category) }}</td>
                        </tr>
                        <tr>
                            <th>Event:</th>
                            <td>
                                @if($expense->event)
                                    <a href="{{ route('events.show', $expense->event->id) }}">
                                        {{ $expense->event->name }}
                                    </a>
                                @else
                                    N/A
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <th>Date:</th>
                            <td>{{ $expense->date->format('d M, Y') }}</td>
                        </tr>
                        <tr>
                            <th>Paid By:</th>
                            <td>{{ $expense->paid_by }}</td>
                        </tr>
                    </table>
                </div>
                <div class="col-md-6">
                    <table class="table table-borderless">
                        <tr>
                            <th width="30%">Amount:</th>
                            <td>KES {{ number_format($expense->amount, 2) }}</td>
                        </tr>
                        <tr>
                            <th>Created By:</th>
                            <td>{{ $expense->creator->name ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th>Updated By:</th>
                            <td>{{ $expense->updater->name ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th>Created At:</th>
                            <td>{{ $expense->created_at->format('d M, Y H:i') }}</td>
                        </tr>
                        <tr>
                            <th>Last Updated:</th>
                            <td>{{ $expense->updated_at->format('d M, Y H:i') }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            @if($expense->notes)
            <div class="row mt-3">
                <div class="col-12">
                    <h6 class="font-weight-bold">Notes:</h6>
                    <p>{{ $expense->notes }}</p>
                </div>
            </div>
            @endif

            @if($expense->receipt_image)
            <div class="row mt-3">
                <div class="col-12">
                    <h6 class="font-weight-bold">Receipt Image:</h6>
                    <div class="mt-2">
                        <a href="{{ asset($expense->receipt_image) }}" target="_blank">
                            <img src="{{ asset($expense->receipt_image) }}" alt="Receipt" class="img-thumbnail" style="max-width: 300px;">
                        </a>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>

    <!-- Status Update Card -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Update Status</h6>
        </div>
        <div class="card-body">
            <form action="{{ route('expenses.update-status', $expense->id) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="row align-items-center">
                    <div class="col-md-4">
                        <select name="status" class="form-select">
                            <option value="pending" {{ $expense->status == 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="approved" {{ $expense->status == 'approved' ? 'selected' : '' }}>Approved</option>
                            <option value="rejected" {{ $expense->status == 'rejected' ? 'selected' : '' }}>Rejected</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-primary">Update Status</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Delete Expense Card -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-danger">Danger Zone</h6>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-8">
                    <p class="mb-0">Delete this expense permanently. This action cannot be undone.</p>
                </div>
                <div class="col-md-4 text-end">
                    <form action="{{ route('expenses.destroy', $expense->id) }}" method="POST" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this expense? This action cannot be undone.')">
                            <i class="fas fa-trash"></i> Delete Expense
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection