@extends('layout')

@section('title', __('store.offline_instructions_title'))

@section('content')
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-header">
                    <h4 class="mb-1">{{ __('store.offline_instructions_heading') }}</h4>
                    <small class="text-muted">
                        {{ __('store.payment_invoice_number') }}: {{ $invoice->invoice_number }}
                    </small>
                </div>
                <div class="card-body">
                    <div class="text-center mb-4">
                        <i class="fas fa-hourglass-half fa-3x text-primary mb-3"></i>
                        <h5>{{ __('store.offline_instructions_awaiting') }}</h5>
                        <p class="text-muted mb-0">{{ __('store.offline_instructions_intro') }}</p>
                    </div>

                    
                    <div class="alert alert-primary text-center">
                        <h4 class="mb-0">
                            <strong>{{ __('store.payment_amount') }}:
                                {{ number_format((float) $invoice->amountDue(), 2) }}
                                {{ $invoice->currency->code ?? '' }}</strong>
                        </h4>
                    </div>

                    
                    @if(!empty($message))
                        <div class="alert alert-info">
                            {{ $message }}
                        </div>
                    @endif

                    
                    @if(!empty($instructions))
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="mb-0">{{ __('store.offline_instructions_payment_instructions') }}</h6>
                            </div>
                            <div class="card-body">
                                {!! nl2br(e($instructions)) !!}
                            </div>
                        </div>
                    @endif

                    
                    @if(!empty($data['bank_info']) && is_array($data['bank_info']))
                        <div class="card mb-4">
                            <div class="card-header">
                                <h6 class="mb-0">{{ __('store.payment_bank_details') }}</h6>
                            </div>
                            <div class="card-body">
                                <ul class="list-unstyled mb-0">
                                    @foreach($data['bank_info'] as $label => $value)
                                        @if(!empty($value) && !is_array($value))
                                            <li class="mb-2">
                                                <strong>{{ ucwords(str_replace('_', ' ', $label)) }}:</strong>
                                                {{ $value }}
                                            </li>
                                        @endif
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    @endif

                    
                    <div class="card mb-4">
                        <div class="card-header">
                            <h6 class="mb-0">{{ __('store.offline_instructions_reference') }}</h6>
                        </div>
                        <div class="card-body">
                            <strong>{{ __('store.payment_reference_description') }}:</strong>
                            {{ $data['reference_code'] ?? $invoice->invoice_number }}
                        </div>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                        <a href="{{ route('store.auth.dashboard') }}" class="btn btn-primary btn-lg">
                            <i class="fas fa-arrow-left me-2"></i>
                            {{ __('store.payment_back_to_dashboard') }}
                        </a>
                    </div>

                    <div class="alert alert-info mt-4 mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        <strong>{{ __('store.payment_need_help') }}</strong>
                        {{ __('store.payment_contact_us_text') }}
                        <a href="{{ lroute('store.contact') }}">{{ __('store.payment_contact_us') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
