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

@section('content')
<x-page-head icon="box-seam" :title="$product->name" :subtitle="$product->code">
    <x-slot:actions>
        @if($product->is_active)
            <span class="badge bg-success">{{ __('config.active') }}</span>
        @else
            <span class="badge bg-secondary">{{ __('config.inactive') }}</span>
        @endif
        <a href="{{ route('admin.finance-products.edit', $product) }}" class="btn btn-primary btn-sm">
            <i class="bi bi-pencil"></i> {{ __('app.edit') }}
        </a>
        <a href="{{ route('admin.finance-products.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>

{{-- KPI strip --}}
<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">{{ number_format($product->applications_count) }}</div>
            <div class="ms-label">{{ __('config.finance_products.applications_count') }}</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="mini-stat">
            <div class="ms-value">{{ $product->profit_rate !== null ? number_format((float) $product->profit_rate, 2) . '%' : '—' }}</div>
            <div class="ms-label">{{ __('config.finance_products.profit_rate') }}</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="mini-stat">
            <div class="ms-value" style="font-size:1rem">
                <x-money :value="$product->min_amount" />
                <span class="text-muted">/</span>
                <x-money :value="$product->max_amount" />
            </div>
            <div class="ms-label">{{ __('config.finance_products.min_amount') }} / {{ __('config.finance_products.max_amount') }}</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="mini-stat">
            <div class="ms-value" style="font-size:1rem">
                {{ $product->min_term_months ?? '—' }} <span class="text-muted">/</span> {{ $product->max_term_months ?? '—' }}
            </div>
            <div class="ms-label">{{ __('config.finance_products.min_term') }} / {{ __('config.finance_products.max_term') }}</div>
        </div>
    </div>
</div>

<div class="row g-3">
    {{-- Left: details + linked catalogue --}}
    <div class="col-lg-5">
        <x-detail-card :title="__('app.basic_info')" icon="info-circle" class="mb-3">
            <x-detail-item :label="__('config.code')"><code>{{ $product->code }}</code></x-detail-item>
            <x-detail-item :label="__('config.name_ar')">{{ $product->name_ar }}</x-detail-item>
            <x-detail-item :label="__('config.name_en')">{{ $product->name_en }}</x-detail-item>
            <x-detail-item :label="__('config.category')">
                {{ $product->category ? __('config.finance_products.categories.' . $product->category) : '' }}
            </x-detail-item>
            <x-detail-item :label="__('config.sort_order')">{{ $product->sort_order }}</x-detail-item>
            <x-detail-item :label="__('config.description')">{{ $product->description }}</x-detail-item>
        </x-detail-card>

        {{-- Guarantees --}}
        <x-related-card :title="__('config.guarantees.title')" icon="shield-check" :count="$product->guarantees->count()" class="mb-3">
            <ul class="list-group list-group-flush">
                @forelse($product->guarantees as $g)
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <span>
                            @can('config.guarantees')
                                <a href="{{ route('admin.guarantees.show', $g) }}" class="text-decoration-none">{{ $g->name }}</a>
                            @else
                                {{ $g->name }}
                            @endcan
                        </span>
                        @if($g->pivot->is_required)
                            <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-3">{{ __('app.no_related') }}</li>
                @endforelse
            </ul>
        </x-related-card>

        {{-- Required documents --}}
        <x-related-card :title="__('config.required_documents.title')" icon="file-earmark-check" :count="$product->requiredDocuments->count()">
            <ul class="list-group list-group-flush">
                @forelse($product->requiredDocuments as $doc)
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <span>
                            @can('config.required_documents')
                                <a href="{{ route('admin.required-documents.show', $doc) }}" class="text-decoration-none">{{ $doc->name }}</a>
                            @else
                                {{ $doc->name }}
                            @endcan
                        </span>
                        @if($doc->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-3">{{ __('app.no_related') }}</li>
                @endforelse
            </ul>
        </x-related-card>
    </div>

    {{-- Right: form fields + applications --}}
    <div class="col-lg-7">
        <x-related-card :title="__('forms.admin.fields_title')" icon="ui-checks-grid" :count="$product->formFields->count()" class="mb-3">
            @if($product->formFields->isNotEmpty())
                <div class="card-body d-flex flex-wrap gap-2">
                    @foreach($product->formFields as $field)
                        <span class="badge bg-info-subtle text-info-emphasis border border-info-subtle p-2">
                            {{ app()->getLocale() === 'en' ? $field->label_en : $field->label_ar }}
                            @if($field->pivot->is_required)<i class="bi bi-asterisk text-danger" style="font-size:.6em"></i>@endif
                        </span>
                    @endforeach
                </div>
            @else
                <div class="card-body text-center text-muted py-3">{{ __('app.no_related') }}</div>
            @endif
        </x-related-card>

        <x-related-card :title="__('app.applications')" icon="folder2-open" :count="$product->applications_count">
            <x-slot:action>
                @can('applications.view')
                    <a href="{{ route('applications.index') }}?finance_product_id={{ $product->id }}" class="small text-decoration-none">{{ __('app.all') }}</a>
                @endcan
            </x-slot:action>
            <div class="table-responsive">
                <table class="table table-hover mb-0 align-middle">
                    <thead class="table-light"><tr>
                        <th>{{ __('app.application_number') }}</th>
                        <th>{{ __('applications.columns.applicant_name') }}</th>
                        <th class="text-end">{{ __('app.amount') }}</th>
                        <th>{{ __('app.status') }}</th>
                    </tr></thead>
                    <tbody>
                        @forelse($product->applications as $app)
                            <tr>
                                <td>
                                    @can('applications.view')
                                        <a href="{{ route('applications.show', $app) }}" class="text-decoration-none fw-semibold">{{ $app->application_number }}</a>
                                    @else
                                        {{ $app->application_number }}
                                    @endcan
                                </td>
                                <td class="text-truncate" style="max-width:160px">{{ optional($app->applicant)->name ?? '—' }}</td>
                                <td class="text-end"><x-money :value="$app->requested_amount" /></td>
                                <td>@include('applications.partials.status_badge', ['status' => $app->status])</td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="text-center text-muted py-4">{{ __('app.no_related') }}</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-related-card>
    </div>
</div>
@endsection