@extends('layouts.app')
@section('title', $document->name)

@section('content')
<x-page-head icon="file-earmark-check" :title="$document->name" :subtitle="$document->code">
    <x-slot:actions>
        @if($document->is_active)
            <span class="badge bg-success">{{ __('config.active') }}</span>
        @else
            <span class="badge bg-secondary">{{ __('config.inactive') }}</span>
        @endif
        <a href="{{ route('admin.required-documents.edit', $document) }}" class="btn btn-primary btn-sm">
            <i class="bi bi-pencil"></i> {{ __('app.edit') }}
        </a>
        <a href="{{ route('admin.required-documents.index') }}" class="btn btn-secondary btn-sm">
            <i class="bi bi-arrow-{{ app()->getLocale() === 'en' ? 'left' : 'right' }}"></i> {{ __('app.back') }}
        </a>
    </x-slot:actions>
</x-page-head>

<div class="row g-2 g-md-3 mb-3">
    <div class="col-6 col-md-3">
        <div class="mini-stat">
            <div class="ms-value">{{ $document->products->count() }}</div>
            <div class="ms-label">{{ __('config.finance_products.title') }}</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="mini-stat">
            <div class="ms-value">{{ number_format($document->application_documents_count) }}</div>
            <div class="ms-label">{{ __('app.documents') }}</div>
        </div>
    </div>
</div>

<div class="row g-3">
    <div class="col-lg-5">
        <x-detail-card :title="__('app.basic_info')" icon="info-circle">
            <x-detail-item :label="__('config.code')"><code>{{ $document->code }}</code></x-detail-item>
            <x-detail-item :label="__('config.name_ar')">{{ $document->name_ar }}</x-detail-item>
            <x-detail-item :label="__('config.name_en')">{{ $document->name_en }}</x-detail-item>
            <x-detail-item :label="__('config.required_documents.applies_to')">
                {{ __('config.required_documents.applies.' . ($document->applies_to ?: 'both')) }}
            </x-detail-item>
            <x-detail-item :label="__('config.required_documents.allowed_mimes')">
                @if($document->allowed_mimes)<code>{{ $document->allowed_mimes }}</code>@endif
            </x-detail-item>
            <x-detail-item :label="__('config.sort_order')">{{ $document->sort_order }}</x-detail-item>
            <x-detail-item :label="__('config.description')">{{ $document->description }}</x-detail-item>
        </x-detail-card>
    </div>

    <div class="col-lg-7">
        <x-related-card :title="__('config.finance_products.title')" icon="box-seam" :count="$document->products->count()">
            <ul class="list-group list-group-flush">
                @forelse($document->products as $p)
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <span>
                            @can('config.finance_products')
                                <a href="{{ route('admin.finance-products.show', $p) }}" class="text-decoration-none fw-semibold">{{ $p->name }}</a>
                            @else
                                {{ $p->name }}
                            @endcan
                            <code class="ms-2 small">{{ $p->code }}</code>
                        </span>
                        @if($p->pivot->is_mandatory)
                            <span class="badge bg-danger-subtle text-danger">{{ __('app.required') }}</span>
                        @else
                            <span class="badge bg-light text-muted">{{ __('app.optional') }}</span>
                        @endif
                    </li>
                @empty
                    <li class="list-group-item text-center text-muted py-4">{{ __('app.no_related') }}</li>
                @endforelse
            </ul>
        </x-related-card>
    </div>
</div>
@endsection