@extends('layouts.app')

@section('title', __('accounts.expenses.previous_expenses'))

@push('styles')
<link href="{{ asset('css/stage-academy.css') }}" rel="stylesheet">
<link href="{{ asset('css/accounts.css') }}" rel="stylesheet">
<link href="{{ asset('css/expenses.css') }}" rel="stylesheet">
@endpush

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('dashboard') }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('accounts') }}">{{ __('accounts.title') }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('accounts.expenses') }}">{{ __('accounts.expenses.title') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ __('accounts.expenses.previous_expenses') }}</li>
                </ol>
            </nav>
            <h4 class="fw-bold mb-0">{{ __('accounts.expenses.previous_expenses') }}</h4>
            <div class="text-muted small">{{ __('accounts.expenses.archives_subtitle') }}</div>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <a href="{{ route('accounts.expenses') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-{{ app()->getLocale() == 'ar' ? 'right' : 'left' }}"></i> {{ __('common.back') }}
            </a>
        </div>
    </div>

    <div class="d-flex flex-column gap-2">
        @forelse ($archives as $archive)
            @php
                $title = app()->getLocale() === 'ar' ? $archive->title_ar : $archive->title_en;
                $settledAt = optional($archive->settlement_date)->format('Y-m-d') ?? '—';
                $settledBy = $archive->settler?->name ?? '—';
            @endphp
            <div class="expense-archive-bar" role="button" tabindex="0" data-href="{{ route('accounts.expenses.archives.show', $archive->id) }}">
                <div class="d-flex flex-column flex-lg-row align-items-start align-items-lg-center gap-3">
                    <div class="flex-grow-1 w-100">
                        <div class="d-flex flex-column flex-md-row gap-2 gap-md-3 align-items-start align-items-md-center mb-2">
                            <div class="fw-bold">{{ $title }}</div>
                            <div class="expense-archive-total">{{ number_format((int) $archive->total_amount) }}</div>
                            <div class="text-muted small">
                                <span>{{ __('accounts.expenses.settlement_date') }}: {{ $settledAt }}</span>
                                <span class="mx-1">•</span>
                                <span>{{ __('accounts.expenses.settled_by') }}: {{ $settledBy }}</span>
                            </div>
                        </div>
                        <div class="row g-2">
                            <div class="col-6 col-md-3 col-lg-2">
                                <div class="meta-label">{{ __('accounts.expenses.items_count') }}</div>
                                <div class="meta-value">{{ number_format((int) $archive->items_count) }}</div>
                            </div>
                            <div class="col-6 col-md-3 col-lg-2">
                                <div class="meta-label">{{ __('accounts.expenses.total_amount') }}</div>
                                <div class="meta-value">{{ number_format((int) $archive->total_amount) }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex gap-2 flex-wrap">
                        <a class="btn btn-sm btn-outline-secondary expense-archive-print" target="_blank" href="{{ route('accounts.expenses.archives.print', $archive->id) }}">
                            <i class="bi bi-printer me-1"></i>{{ __('accounts.expenses.print') }}
                        </a>
                        <a class="btn btn-sm btn-outline-primary expense-archive-open" href="{{ route('accounts.expenses.archives.show', $archive->id) }}">
                            <i class="bi bi-eye me-1"></i>{{ __('common.details') }}
                        </a>
                    </div>
                </div>
            </div>
        @empty
            <div class="text-center py-5 text-muted">
                <i class="bi bi-inbox fs-1 mb-3 d-block"></i>
                {{ __('accounts.expenses.archives_empty') }}
            </div>
        @endforelse
    </div>

    @if(method_exists($archives, 'links'))
        <div class="mt-3">
            {{ $archives->links() }}
        </div>
    @endif
</div>

<script>
    document.querySelectorAll('.expense-archive-bar').forEach((el) => {
        el.addEventListener('click', (e) => {
            const target = e.target;
            if (target && (target.closest('.expense-archive-print') || target.closest('.expense-archive-open'))) {
                return;
            }
            const href = el.getAttribute('data-href');
            if (href) window.location.href = href;
        });
        el.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                const href = el.getAttribute('data-href');
                if (href) window.location.href = href;
            }
        });
    });
</script>
@endsection

