@extends('layouts.app')

@section('title', 'Recommendation')

@section('content')
<x-breadcrumb :items="[
    ['label' => 'Recommendations', 'url' => route('recommendations.index')],
    ['label' => $recommendation->title ?? 'Detail'],
]" />

<x-page-header :title="$recommendation->title" subtitle="Review evidence and accept or reject this recommendation.">
    <x-slot name="actions">
        <a href="{{ route('recommendations.index') }}" class="procure-btn"><i class="fas fa-arrow-left"></i> Back</a>
        @if(($recommendation->status ?? '') === 'open')
            <button type="button" class="procure-btn-primary" data-toggle="modal" data-target="#acceptModal">
                <i class="fas fa-check"></i> Accept
            </button>
            <button type="button" class="procure-btn text-danger" data-toggle="modal" data-target="#rejectRecModal">
                <i class="fas fa-times"></i> Reject
            </button>
        @endif
    </x-slot>
</x-page-header>

<div class="row mb-3">
    <div class="col-md-4 mb-3">
        <x-kpi-card
            label="Estimated Savings"
            :value="($recommendation->estimated_savings !== null ? number_format($recommendation->estimated_savings, 2).' '.($recommendation->currency ?? 'SAR') : '—')"
            icon="fas fa-piggy-bank"
            color="green" />
    </div>
    <div class="col-md-4 mb-3">
        <x-kpi-card
            label="Priority"
            :value="ucfirst($recommendation->priority ?? '—')"
            icon="fas fa-flag"
            color="purple" />
    </div>
    <div class="col-md-4 mb-3">
        <x-kpi-card
            label="Status"
            :value="ucfirst(str_replace('_', ' ', $recommendation->status ?? '—'))"
            icon="fas fa-info-circle"
            color="blue" />
    </div>
</div>

<div class="row">
    <div class="col-lg-7 mb-3">
        <div class="procure-form-card h-100">
            <h5 class="font-weight-bold mb-3">Recommendation</h5>
            <p class="procure-detail-label">Type</p>
            <p class="procure-detail-value">{{ ucfirst(str_replace('_', ' ', $recommendation->recommendation_type ?? '')) }}</p>
            <p class="procure-detail-label">Suggested Action</p>
            <p class="procure-detail-value">{{ $recommendation->suggested_action ?? '—' }}</p>
            <p class="procure-detail-label">Explanation</p>
            <p class="procure-detail-value">{{ $recommendation->explanation ?? '—' }}</p>
            @if(!empty($recommendation->evidence_json))
                <p class="procure-detail-label">Evidence</p>
                <pre class="p-3 mb-0" style="background:#f8fafc;border-radius:8px;font-size:12px;overflow:auto;">{{ json_encode($recommendation->evidence_json, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
            @endif
        </div>
    </div>
    <div class="col-lg-5 mb-3">
        <div class="procure-form-card h-100">
            <h5 class="font-weight-bold mb-3">Context</h5>
            <p class="procure-detail-label">Item</p>
            <p class="procure-detail-value">{{ $recommendation->item->name_en ?? '—' }}</p>
            <p class="procure-detail-label">Supplier</p>
            <p class="procure-detail-value">{{ $recommendation->supplier->name ?? '—' }}</p>
            <p class="procure-detail-label">Generated At</p>
            <p class="procure-detail-value">{{ optional($recommendation->generated_at)->format('Y-m-d H:i') ?? '—' }}</p>
            <p class="procure-detail-label">Expires At</p>
            <p class="procure-detail-value">{{ optional($recommendation->expires_at)->format('Y-m-d H:i') ?? '—' }}</p>
        </div>
    </div>
</div>

@if(($recommendation->status ?? '') === 'open')
    @php
        $reasonCodes = \App\Enums\RecommendationReasonCode::cases();
    @endphp
    <div class="modal fade" id="acceptModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <form method="POST" action="{{ route('recommendations.accept', $recommendation) }}" class="modal-content" style="border-radius:12px;border:none;">
                @csrf
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title">Accept Recommendation</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="font-weight-bold">Reason Code <span class="text-danger">*</span></label>
                        <select name="reason_code" class="form-control" required style="border-radius:8px;">
                            @foreach($reasonCodes as $code)
                                <option value="{{ $code->value }}">{{ $code->label() }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="font-weight-bold">Notes</label>
                        <textarea name="reason_text" rows="3" class="form-control" style="border-radius:8px;"></textarea>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" style="border-radius:8px;">Cancel</button>
                    <button type="submit" class="btn btn-success" style="border-radius:8px;">Accept</button>
                </div>
            </form>
        </div>
    </div>
    <div class="modal fade" id="rejectRecModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <form method="POST" action="{{ route('recommendations.reject', $recommendation) }}" class="modal-content" style="border-radius:12px;border:none;">
                @csrf
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title">Reject Recommendation</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="font-weight-bold">Reason Code <span class="text-danger">*</span></label>
                        <select name="reason_code" class="form-control" required style="border-radius:8px;">
                            @foreach($reasonCodes as $code)
                                <option value="{{ $code->value }}">{{ $code->label() }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="font-weight-bold">Notes</label>
                        <textarea name="reason_text" rows="3" class="form-control" style="border-radius:8px;"></textarea>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" style="border-radius:8px;">Cancel</button>
                    <button type="submit" class="btn btn-danger" style="border-radius:8px;">Reject</button>
                </div>
            </form>
        </div>
    </div>
@endif
@endsection