{{-- resources/views/expenses/show.blade.php --}}
@extends('layouts.app')
@section('title', 'Expense ' . $expense->reference)
@section('page_title', $expense->title)
@section('page_subtitle', $expense->reference)

@section('content')

@php
    $sc = [
        'pending'  => ['bg'=>'#fef3c7','color'=>'#92400e'],
        'approved' => ['bg'=>'#dbeafe','color'=>'#1e40af'],
        'rejected' => ['bg'=>'#fee2e2','color'=>'#991b1b'],
        'paid'     => ['bg'=>'#d1fae5','color'=>'#065f46'],
    ][$expense->status] ?? ['bg'=>'#f1f5f9','color'=>'#475569'];
@endphp

{{-- Action bar --}}
<div class="d-flex align-items-center gap-2 mb-3 flex-wrap">
    <a href="{{ tenant_route('expenses.index') }}"
       class="btn btn-sm btn-outline-secondary">← Expenses</a>

    <span style="font-size:.75rem;font-weight:600;padding:5px 12px;
                 border-radius:20px;background:{{ $sc['bg'] }};
                 color:{{ $sc['color'] }};">
        {{ strtoupper($expense->status) }}
    </span>

    <div class="ms-auto d-flex gap-2 flex-wrap">

        @if($expense->status === 'pending')
            <button class="btn btn-sm btn-success"
                    data-bs-toggle="modal"
                    data-bs-target="#approveModal">
                <i class="bi bi-check-circle me-1"></i>Approve
            </button>
            <button class="btn btn-sm btn-outline-danger"
                    data-bs-toggle="modal"
                    data-bs-target="#rejectModal">
                Reject
            </button>
        @endif

        @if(in_array($expense->status, ['pending','rejected']))
            <a href="{{ tenant_route('expenses.edit', ['expense' => $expense->id]) }}"
               class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-pencil me-1"></i>Edit
            </a>
            <form method="POST"
                  action="{{ tenant_route('expenses.destroy', ['expense' => $expense->id]) }}"
                  onsubmit="return confirm('Delete this expense?')">
                @csrf @method('DELETE')
                <button class="btn btn-sm btn-outline-danger"
                        type="submit">
                    <i class="bi bi-trash me-1"></i>Delete
                </button>
            </form>
        @endif

    </div>
</div>

<div class="row g-3">

    {{-- Left --}}
    <div class="col-xl-8">

        {{-- Details --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-wallet2 me-2"
                       style="color:var(--clay)"></i>
                    Expense Details
                </span>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <div style="font-size:.68rem;font-weight:700;
                                    text-transform:uppercase;
                                    letter-spacing:.08em;
                                    color:var(--muted);margin-bottom:4px;">
                            Title
                        </div>
                        <div class="fw-semibold">{{ $expense->title }}</div>
                    </div>
                    <div class="col-md-6">
                        <div style="font-size:.68rem;font-weight:700;
                                    text-transform:uppercase;
                                    letter-spacing:.08em;
                                    color:var(--muted);margin-bottom:4px;">
                            Category
                        </div>
                        <div style="display:inline-flex;
                                    align-items:center;gap:6px;">
                            @if($expense->category?->color)
                                <span style="width:8px;height:8px;
                                             border-radius:50%;
                                             background:{{ $expense->category->color }};
                                             display:inline-block;"></span>
                            @endif
                            {{ $expense->category?->name ?? '—' }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div style="font-size:.68rem;font-weight:700;
                                    text-transform:uppercase;
                                    letter-spacing:.08em;
                                    color:var(--muted);margin-bottom:4px;">
                            Amount
                        </div>
                        <div class="fw-bold" style="font-size:1.1rem;
                                                    color:var(--clay);">
                            {{ $expense->currency }}
                            {{ number_format($expense->amount, 2) }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div style="font-size:.68rem;font-weight:700;
                                    text-transform:uppercase;
                                    letter-spacing:.08em;
                                    color:var(--muted);margin-bottom:4px;">
                            Date
                        </div>
                        <div>{{ $expense->expense_date->format('d M Y') }}</div>
                    </div>
                    <div class="col-md-3">
                        <div style="font-size:.68rem;font-weight:700;
                                    text-transform:uppercase;
                                    letter-spacing:.08em;
                                    color:var(--muted);margin-bottom:4px;">
                            Payment Method
                        </div>
                        <div>
                            {{ $expense->payment_method
                                ? ucfirst(str_replace('_', ' ', $expense->payment_method))
                                : '—' }}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div style="font-size:.68rem;font-weight:700;
                                    text-transform:uppercase;
                                    letter-spacing:.08em;
                                    color:var(--muted);margin-bottom:4px;">
                            Vendor
                        </div>
                        <div>{{ $expense->vendor ?? '—' }}</div>
                    </div>
                    @if($expense->is_recurring)
                        <div class="col-md-6">
                            <div style="font-size:.68rem;font-weight:700;
                                        text-transform:uppercase;
                                        letter-spacing:.08em;
                                        color:var(--muted);margin-bottom:4px;">
                                Recurring
                            </div>
                            <div>
                                <span style="font-size:.75rem;
                                             background:#dbeafe;
                                             color:#1e40af;
                                             padding:2px 8px;
                                             border-radius:4px;">
                                    {{ ucfirst($expense->recurring_interval) }}
                                </span>
                            </div>
                        </div>
                    @endif
                    @if($expense->description)
                        <div class="col-12">
                            <div style="font-size:.68rem;font-weight:700;
                                        text-transform:uppercase;
                                        letter-spacing:.08em;
                                        color:var(--muted);margin-bottom:4px;">
                                Description
                            </div>
                            <div style="font-size:.82rem;color:var(--muted);
                                        line-height:1.6;">
                                {{ $expense->description }}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Attachments --}}
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-paperclip me-2"
                       style="color:var(--clay)"></i>
                    Attachments
                </span>
                <span style="font-size:.75rem;color:var(--muted);">
                    {{ $expense->attachments->count() }} files
                </span>
            </div>
            <div class="card-body">

                @if($expense->attachments->count() > 0)
                    <div style="display:flex;flex-direction:column;
                                gap:8px;margin-bottom:16px;">
                        @foreach($expense->attachments as $attachment)
                            <div style="display:flex;align-items:center;
                                        gap:10px;padding:10px 12px;
                                        background:var(--bg);border-radius:8px;">
                                <div style="font-size:1.2rem;flex-shrink:0;">
                                    @if(str_contains($attachment->mime_type, 'pdf'))
                                        📄
                                    @elseif(str_contains($attachment->mime_type, 'image'))
                                        🖼️
                                    @else
                                        📎
                                    @endif
                                </div>
                                <div style="flex:1;min-width:0;">
                                    <div style="font-size:.8rem;font-weight:600;
                                                overflow:hidden;text-overflow:ellipsis;
                                                white-space:nowrap;">
                                        {{ $attachment->original_filename }}
                                    </div>
                                    <div style="font-size:.68rem;color:var(--muted);">
                                        {{ number_format($attachment->file_size_bytes / 1024, 0) }} KB
                                    </div>
                                </div>
                                <div style="display:flex;gap:6px;flex-shrink:0;">
                                    <a href="{{ asset('storage/' . $attachment->stored_path) }}"
                                       target="_blank"
                                       class="btn btn-xs btn-outline-secondary">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <form method="POST"
                                          action="{{ tenant_route('expenses.attachments.destroy', ['expense' => $expense->id, 'attachment' => $attachment->id]) }}"
                                          onsubmit="return confirm('Remove attachment?')">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-xs btn-outline-danger"
                                                type="submit">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif

                {{-- Upload more --}}
                <form method="POST"
                      action="{{ tenant_route('expenses.attachments.store', ['expense' => $expense->id]) }}"
                      enctype="multipart/form-data">
                    @csrf
                    <div class="d-flex gap-2 align-items-center">
                        <input type="file" name="attachments[]"
                               multiple
                               class="form-control form-control-sm"
                               accept=".pdf,.jpg,.jpeg,.png,.webp">
                        <button type="submit"
                                class="btn btn-sm btn-outline-secondary"
                                style="white-space:nowrap;">
                            <i class="bi bi-upload me-1"></i>Upload
                        </button>
                    </div>
                </form>

            </div>
        </div>

    </div>

    {{-- Right --}}
    <div class="col-xl-4">

        {{-- Approval --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">Approval</span>
            </div>
            <div class="card-body">
                <div style="display:flex;flex-direction:column;
                            gap:8px;font-size:.8rem;">
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--muted);">Status</span>
                        <span style="font-weight:600;
                                     color:{{ $sc['color'] }};">
                            {{ ucfirst($expense->status) }}
                        </span>
                    </div>
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--muted);">Created By</span>
                        <span>{{ $expense->createdBy?->name ?? '—' }}</span>
                    </div>
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--muted);">Created</span>
                        <span>{{ $expense->created_at->format('d M Y H:i') }}</span>
                    </div>
                    @if($expense->approvedBy)
                        <div style="display:flex;justify-content:space-between;">
                            <span style="color:var(--muted);">
                                {{ $expense->status === 'rejected' ? 'Rejected By' : 'Approved By' }}
                            </span>
                            <span>{{ $expense->approvedBy->name }}</span>
                        </div>
                    @endif
                    @if($expense->approved_at)
                        <div style="display:flex;justify-content:space-between;">
                            <span style="color:var(--muted);">Date</span>
                            <span>{{ $expense->approved_at->format('d M Y H:i') }}</span>
                        </div>
                    @endif
                    @if($expense->approval_notes)
                        <div style="padding-top:6px;
                                    border-top:1px solid var(--border);">
                            <div style="font-size:.68rem;font-weight:700;
                                        text-transform:uppercase;
                                        letter-spacing:.08em;
                                        color:var(--muted);margin-bottom:3px;">
                                Notes
                            </div>
                            <div style="color:var(--muted);">
                                {{ $expense->approval_notes }}
                            </div>
                        </div>
                    @endif
                    @if($expense->rejection_reason)
                        <div style="padding-top:6px;
                                    border-top:1px solid var(--border);">
                            <div style="font-size:.68rem;font-weight:700;
                                        text-transform:uppercase;
                                        letter-spacing:.08em;
                                        color:var(--danger);margin-bottom:3px;">
                                Rejection Reason
                            </div>
                            <div style="color:var(--danger);">
                                {{ $expense->rejection_reason }}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Quick approve for pending --}}
        @if($expense->status === 'pending')
            <div class="card"
                 style="border-left:3px solid var(--warning);">
                <div class="card-body">
                    <p style="font-size:.78rem;color:var(--muted);margin-bottom:12px;">
                        This expense is awaiting approval.
                    </p>
                    <button class="btn btn-success btn-sm w-100 mb-2"
                            data-bs-toggle="modal"
                            data-bs-target="#approveModal">
                        <i class="bi bi-check-circle me-1"></i>
                        Approve Expense
                    </button>
                    <button class="btn btn-outline-danger btn-sm w-100"
                            data-bs-toggle="modal"
                            data-bs-target="#rejectModal">
                        Reject
                    </button>
                </div>
            </div>
        @endif

    </div>
</div>

{{-- Approve Modal --}}
<div class="modal fade" id="approveModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST"
                  action="{{ tenant_route('expenses.approve', ['expense' => $expense->id]) }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title"
                        style="font-size:.9rem;font-weight:700;">
                        Approve Expense
                    </h5>
                    <button type="button" class="btn-close"
                            data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div style="background:var(--bg);border-radius:8px;
                                padding:12px;margin-bottom:16px;
                                font-size:.82rem;">
                        <div class="fw-semibold">{{ $expense->title }}</div>
                        <div style="color:var(--clay);font-weight:700;
                                    font-size:.95rem;margin-top:3px;">
                            {{ $expense->currency }}
                            {{ number_format($expense->amount, 2) }}
                        </div>
                    </div>
                    <label class="form-label fw-semibold">
                        Approval Notes (optional)
                    </label>
                    <textarea name="notes" rows="2"
                              class="form-control"
                              placeholder="Any notes..."></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary btn-sm"
                            data-bs-dismiss="modal">Cancel</button>
                    <button type="submit"
                            class="btn btn-success btn-sm">
                        <i class="bi bi-check-circle me-1"></i>
                        Confirm Approval
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Reject Modal --}}
<div class="modal fade" id="rejectModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST"
                  action="{{ tenant_route('expenses.reject', ['expense' => $expense->id]) }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title"
                        style="font-size:.9rem;font-weight:700;">
                        Reject Expense
                    </h5>
                    <button type="button" class="btn-close"
                            data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <label class="form-label fw-semibold">
                        Reason <span class="text-danger">*</span>
                    </label>
                    <textarea name="rejection_reason" rows="3"
                              class="form-control"
                              required
                              placeholder="Reason for rejecting..."></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button"
                            class="btn btn-outline-secondary btn-sm"
                            data-bs-dismiss="modal">Cancel</button>
                    <button type="submit"
                            class="btn btn-danger btn-sm">
                        Reject Expense
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection