@extends('root')
@section('title', 'Detail Expense')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Detail Expense',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
            ['url' => route('admin.expenses.index'), 'label' => 'Expenses'],
        ],
        'current' => 'Detail'
    ])

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="ti ti-receipt me-2"></i>Informasi Expense</h5>
                    <div class="btn-group">
                        <button class="btn btn-warning btn-sm btn-create" data-url="{{ route('admin.expenses.edit', $expense) }}">
                            <i class="ti ti-pencil me-1"></i>Edit
                        </button>
                        <button class="btn btn-danger btn-sm btn-delete" data-url="{{ route('admin.expenses.destroy', $expense) }}" data-redirect="{{ route('admin.expenses.index') }}">
                            <i class="ti ti-trash me-1"></i>Hapus
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        <tr>
                            <td width="200" class="text-muted">Tanggal</td>
                            <td class="fw-semibold">{{ $expense->expense_date->format('d F Y') }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Kategori</td>
                            <td>
                                @if($expense->category)
                                    <span class="badge" style="background-color:{{ $expense->category->color }}">
                                        <i class="{{ $expense->category->icon }} me-1"></i>{{ $expense->category->name }}
                                    </span>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted">Deskripsi</td>
                            <td class="fw-semibold">{{ $expense->description }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Jumlah</td>
                            <td>
                                <span class="fs-4 fw-bold text-danger">{{ $expense->formatted_amount }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted">Metode Pembayaran</td>
                            <td>{{ $expense->payment_method_label }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Status Pembayaran</td>
                            <td>
                                @if($expense->payment_status == 'paid')
                                    <span class="badge bg-success"><i class="ti ti-check me-1"></i>Paid</span>
                                @else
                                    <span class="badge bg-danger"><i class="ti ti-clock me-1"></i>Unpaid</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted">Nomor Referensi</td>
                            <td>
                                @if($expense->reference_number)
                                    <code>{{ $expense->reference_number }}</code>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted">Catatan</td>
                            <td>{{ $expense->notes ?: '-' }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            {{-- Attachment Card --}}
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="mb-0"><i class="ti ti-paperclip me-2"></i>Lampiran Dokumen</h6>
                </div>
                <div class="card-body text-center">
                    @if($expense->attachment_url)
                        @php
                            $isImage = preg_match('/\.(jpg|jpeg|png|gif|webp)$/i', $expense->attachment);
                        @endphp
                        @if($isImage)
                            <a href="{{ $expense->attachment_url }}" target="_blank">
                                <img src="{{ $expense->attachment_url }}" class="img-fluid rounded mb-2" style="max-height: 200px;">
                            </a>
                        @else
                            <div class="py-4">
                                <i class="ti ti-file-text fs-1 text-muted"></i>
                            </div>
                        @endif
                        <a href="{{ $expense->attachment_url }}" target="_blank" class="btn btn-primary btn-sm">
                            <i class="ti ti-download me-1"></i>Lihat/Download
                        </a>
                    @else
                        <div class="py-4 text-muted">
                            <i class="ti ti-file-off fs-1"></i>
                            <p class="mb-0 mt-2">Tidak ada lampiran</p>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Transfer Proof Card --}}
            <div class="card mb-3">
                <div class="card-header bg-success-subtle">
                    <h6 class="mb-0"><i class="ti ti-receipt me-2"></i>Bukti Transfer</h6>
                </div>
                <div class="card-body text-center">
                    @if($expense->transfer_proof_url)
                        @php
                            $isImageProof = preg_match('/\.(jpg|jpeg|png|gif|webp)$/i', $expense->transfer_proof);
                        @endphp
                        @if($isImageProof)
                            <a href="{{ $expense->transfer_proof_url }}" target="_blank">
                                <img src="{{ $expense->transfer_proof_url }}" class="img-fluid rounded mb-2" style="max-height: 200px;">
                            </a>
                        @else
                            <div class="py-4">
                                <i class="ti ti-file-text fs-1 text-success"></i>
                            </div>
                        @endif
                        <a href="{{ $expense->transfer_proof_url }}" target="_blank" class="btn btn-success btn-sm">
                            <i class="ti ti-download me-1"></i>Lihat/Download
                        </a>
                    @else
                        <div class="py-4 text-muted">
                            <i class="ti ti-receipt-off fs-1"></i>
                            <p class="mb-0 mt-2">Tidak ada bukti transfer</p>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Audit Info --}}
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="ti ti-info-circle me-2"></i>Info Audit</h6>
                </div>
                <div class="card-body">
                    <table class="table table-sm table-borderless mb-0">
                        <tr>
                            <td class="text-muted">Dibuat oleh</td>
                            <td class="text-end">{{ $expense->creator->name ?? '-' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Dibuat pada</td>
                            <td class="text-end">{{ $expense->created_at->format('d M Y H:i') }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Diupdate pada</td>
                            <td class="text-end">{{ $expense->updated_at->format('d M Y H:i') }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection