@extends('admin.layouts.master')

@section('title', __('admin.expenses.show_title'))
@section('css')@endsection

@section('content')
@php
    $statusColor = match($expense->status) {
        'pending' => 'warning',
        'approved' => 'info',
        'paid' => 'success',
        default => 'secondary',
    };

    $attachmentExtension = $expense->attachment ? strtolower(pathinfo($expense->attachment, PATHINFO_EXTENSION)) : null;
    $isImageAttachment = in_array($attachmentExtension, ['jpg', 'jpeg', 'png', 'webp'], true);
@endphp
<div class="page-content-wrapper">
    <div class="content-container">
        <div class="page-content">
            <div class="content-header d-flex justify-content-between align-items-start flex-wrap gap-3">
                <div>
                    <h1 class="mb-1">{{ __('admin.expenses.show_title') }}: {{ $expense->title }}</h1>
                    <p class="text-muted mb-0">{{ __('admin.expenses.show_subtitle') }}</p>
                </div>
                <div class="d-flex gap-2 flex-wrap">
                    @if($expense->project_id)
                        <a href="{{ route('admin.projects.show', $expense->project_id) }}" class="btn btn-outline-primary">
                            <i class="ti ti-building me-1"></i>{{ __('admin.expenses.view_project') }}
                        </a>
                    @endif
                    <a href="{{ route('admin.expenses.edit', $expense) }}" class="btn btn-warning">
                        <i class="ti ti-pencil me-1"></i>{{ __('admin.actions.edit') }}
                    </a>
                    <a href="{{ route('admin.expenses.index') }}" class="btn btn-outline-secondary">
                        <i class="ti ti-arrow-right me-1"></i>{{ __('admin.actions.back_to_list') }}
                    </a>
                </div>
            </div>

            @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"></button>
                </div>
            @endif

            <div class="row g-3 mb-1">
                <div class="col-xl-3 col-sm-6">
                    <div class="card border-danger shadow-sm h-100">
                        <div class="card-body">
                            <p class="text-muted mb-1">{{ __('admin.expenses.metrics.expense_amount') }}</p>
                            <h4 class="mb-0 text-danger">{{ number_format((float) $expense->amount, 2) }} {{ __('ر.س') }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6">
                    <div class="card border-primary shadow-sm h-100">
                        <div class="card-body">
                            <p class="text-muted mb-1">{{ __('admin.expenses.metrics.project_total') }}</p>
                            <h4 class="mb-0">{{ number_format((float) $summary['project_total'], 2) }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6">
                    <div class="card border-warning shadow-sm h-100">
                        <div class="card-body">
                            <p class="text-muted mb-1">{{ __('admin.expenses.metrics.stage_total') }}</p>
                            <h4 class="mb-0 text-warning">{{ $expense->stage_id ? number_format((float) $summary['stage_total'], 2) : '—' }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-sm-6">
                    <div class="card border-info shadow-sm h-100">
                        <div class="card-body">
                            <p class="text-muted mb-1">{{ __('admin.expenses.metrics.category_total') }}</p>
                            <h4 class="mb-0 text-info">{{ number_format((float) $summary['category_total'], 2) }}</h4>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row g-4">
                <div class="col-xl-8">
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <div>
                                <h4 class="mb-1">{{ __('admin.expenses.details_title') }}</h4>
                                <p class="text-muted mb-0 small">{{ __('admin.expenses.profile_hint') }}</p>
                            </div>
                            <div class="d-flex gap-2 flex-wrap">
                                <span class="badge bg-{{ $statusColor }}">{{ __('admin.expenses.statuses.'.$expense->status) }}</span>
                                <span class="badge bg-info-subtle text-info">{{ $expense->expense_category }}</span>
                                <span class="badge bg-light text-dark border">{{ __('admin.expenses.payment_methods.'.$expense->payment_method) }}</span>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <label class="text-muted d-block mb-1">{{ __('admin.expenses.fields.project_id') }}</label>
                                    <div class="fw-semibold">{{ $expense->project?->project_name ?: $expense->project?->name ?: '—' }}</div>
                                </div>
                                <div class="col-md-6">
                                    <label class="text-muted d-block mb-1">{{ __('admin.expenses.fields.stage_id') }}</label>
                                    <div class="fw-semibold">
                                        {{ $expense->stage ? '#'.$expense->stage->sequence_no.' '.$expense->stage->name : '—' }}
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <label class="text-muted d-block mb-1">{{ __('admin.expenses.fields.amount') }}</label>
                                    <div class="fw-semibold text-danger">{{ number_format((float) $expense->amount, 2) }} {{ __('ر.س') }}</div>
                                </div>
                                <div class="col-md-4">
                                    <label class="text-muted d-block mb-1">{{ __('admin.expenses.fields.expense_date') }}</label>
                                    <div class="fw-semibold">{{ $expense->expense_date?->format('Y-m-d') ?: '—' }}</div>
                                </div>
                                <div class="col-md-4">
                                    <label class="text-muted d-block mb-1">{{ __('admin.expenses.fields.created_by') }}</label>
                                    <div class="fw-semibold">{{ $expense->creator?->name ?: '—' }}</div>
                                </div>

                                <div class="col-md-6">
                                    <label class="text-muted d-block mb-1">{{ __('admin.expenses.fields.vendor_name') }}</label>
                                    <div class="fw-semibold">{{ $expense->vendor_name ?: '—' }}</div>
                                </div>
                                <div class="col-md-6">
                                    <label class="text-muted d-block mb-1">{{ __('admin.expenses.fields.receipt_number') }}</label>
                                    <div class="fw-semibold">{{ $expense->receipt_number ?: '—' }}</div>
                                </div>

                                <div class="col-12">
                                    <label class="text-muted d-block mb-1">{{ __('admin.expenses.fields.description') }}</label>
                                    <div class="border rounded-3 p-3 bg-light-subtle">{{ $expense->description }}</div>
                                </div>

                                <div class="col-12">
                                    <label class="text-muted d-block mb-1">{{ __('admin.expenses.fields.notes') }}</label>
                                    <div class="border rounded-3 p-3 bg-light-subtle">{{ $expense->notes ?: '—' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-transparent d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <div>
                                <h4 class="mb-1">{{ __('admin.expenses.related_expenses_title') }}</h4>
                                <p class="text-muted mb-0 small">{{ __('admin.expenses.related_expenses_hint') }}</p>
                            </div>
                            <span class="badge bg-primary-subtle text-primary">{{ $relatedExpenses->count() }}</span>
                        </div>
                        <div class="card-body">
                            @if($relatedExpenses->isEmpty())
                                <div class="alert alert-light mb-0">{{ __('admin.expenses.no_related_expenses') }}</div>
                            @else
                                <div class="table-responsive">
                                    <table class="table table-hover align-middle mb-0">
                                        <thead>
                                        <tr>
                                            <th>{{ __('admin.expenses.fields.title') }}</th>
                                            <th>{{ __('admin.expenses.fields.expense_date') }}</th>
                                            <th>{{ __('admin.expenses.fields.amount') }}</th>
                                            <th>{{ __('admin.expenses.fields.status') }}</th>
                                            <th>{{ __('admin.actions.actions') }}</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($relatedExpenses as $relatedExpense)
                                            <tr>
                                                <td>
                                                    <div class="fw-semibold">{{ $relatedExpense->title }}</div>
                                                    <div class="small text-muted">{{ $relatedExpense->expense_category }}</div>
                                                </td>
                                                <td>{{ $relatedExpense->expense_date?->format('Y-m-d') ?: '—' }}</td>
                                                <td class="text-danger fw-semibold">{{ number_format((float) $relatedExpense->amount, 2) }}</td>
                                                <td><span class="badge bg-secondary">{{ __('admin.expenses.statuses.'.$relatedExpense->status) }}</span></td>
                                                <td>
                                                    <a href="{{ route('admin.expenses.show', $relatedExpense) }}" class="btn btn-sm btn-outline-info">
                                                        <i class="ti ti-eye"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="col-xl-4">
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h4 class="mb-1">{{ __('admin.expenses.context_title') }}</h4>
                            <p class="text-muted mb-0 small">{{ __('admin.expenses.context_hint') }}</p>
                        </div>
                        <div class="card-body d-grid gap-3">
                            <div>
                                <div class="small text-muted">{{ __('admin.expenses.fields.project_id') }}</div>
                                @if($expense->project_id)
                                    <a href="{{ route('admin.projects.show', $expense->project_id) }}" class="fw-semibold text-dark">
                                        {{ $expense->project?->project_name ?: $expense->project?->name ?: '—' }}
                                    </a>
                                    <div class="small text-muted">{{ __('admin.expenses.metrics.total_items') }}: {{ number_format($summary['project_count']) }}</div>
                                @else
                                    <div class="fw-semibold">—</div>
                                @endif
                            </div>
                            <div>
                                <div class="small text-muted">{{ __('admin.expenses.fields.stage_id') }}</div>
                                @if($expense->stage_id)
                                    <a href="{{ route('admin.project_stages.show', $expense->stage_id) }}" class="fw-semibold text-dark">
                                        #{{ $expense->stage?->sequence_no }} {{ $expense->stage?->name }}
                                    </a>
                                @else
                                    <div class="fw-semibold">{{ __('admin.expenses.without_stage') }}</div>
                                @endif
                            </div>
                            <div>
                                <div class="small text-muted">{{ __('admin.expenses.fields.expense_category') }}</div>
                                <div class="fw-semibold">{{ $expense->expense_category }}</div>
                                <div class="small text-muted">{{ __('admin.expenses.metrics.category_count') }}: {{ number_format($summary['category_count']) }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h4 class="mb-1">{{ __('admin.expenses.attachment_title') }}</h4>
                            <p class="text-muted mb-0 small">{{ __('admin.expenses.attachment_hint') }}</p>
                        </div>
                        <div class="card-body">
                            @if($expense->attachment)
                                @if($isImageAttachment)
                                    <div class="mb-3 border rounded-3 overflow-hidden">
                                        <img src="{{ asset('storage/'.$expense->attachment) }}" alt="{{ $expense->title }}" class="img-fluid w-100">
                                    </div>
                                @endif
                                <a href="{{ asset('storage/'.$expense->attachment) }}" target="_blank" class="btn btn-outline-info w-100">
                                    <i class="ti ti-paperclip me-1"></i>{{ __('admin.expenses.view_attachment') }}
                                </a>
                            @else
                                <div class="alert alert-light mb-0">{{ __('admin.expenses.no_attachment') }}</div>
                            @endif
                        </div>
                    </div>

                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-transparent">
                            <h4 class="mb-1">{{ __('admin.expenses.quick_actions_title') }}</h4>
                            <p class="text-muted mb-0 small">{{ __('admin.expenses.quick_actions_hint') }}</p>
                        </div>
                        <div class="card-body d-grid gap-2">
                            <a href="{{ route('admin.expenses.create', array_filter(['project_id' => $expense->project_id, 'stage_id' => $expense->stage_id])) }}" class="btn btn-outline-primary">
                                <i class="ti ti-copy-plus me-1"></i>{{ __('admin.expenses.create_related') }}
                            </a>
                            <a href="{{ route('admin.expenses.index', array_filter(['project_id' => $expense->project_id, 'stage_id' => $expense->stage_id, 'category' => $expense->expense_category])) }}" class="btn btn-outline-secondary">
                                <i class="ti ti-table me-1"></i>{{ __('admin.expenses.browse_related') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection