@extends('layouts.app')

@section('title', 'Annulation de votre commande')

@section('styles')
<style>



</style>
@endsection

@section('content')

<div class="ht__bradcaump__area mb-5" style="background: rgba(0, 0, 0, 0) url({{ asset('assets/images/bg/2.jpg') }}) no-repeat scroll center center / cover ;">
    <div class="ht__bradcaump__wrap_small">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="bradcaump__inner text-center">
                        <h2 class="bradcaump-title">{{ __('shop.checkout_cancel_title') }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container pb-5 fade-in">
    <div class="row justify-content-center">
        <div class="order-confirmation-wrapper">
            <div class="icon-circle-cancel">
                <svg viewBox="0 0 24 24">
                    <path d="M18.364 5.636l-1.414-1.414L12 9.172 7.05 4.222 5.636 5.636 10.586 10.586 5.636 15.536l1.414 1.414L12 12.828l4.95 4.95 1.414-1.414-4.95-4.95z" />
                </svg>
            </div>
            <h1>{{ __('shop.checkout_cancel_order_canceled') }}</h1>

            <div class="info-block">
                <p>{{ __('shop.checkout_cancel_order_canceled') }}</p>
                <p>{{ __('shop.checkout_cancel_order_error') }}</p>
                <!-- <span class="order-code">{{ __('shop.checkout_cancel_order_reference') }} : <strong>#{{ $order_reference ?? '' }}</strong></span> -->
                @if($order && $order->order_reference)
                <span class="order-code">{{ __('shop.checkout_cancel_order_reference') }} : <strong>#{{ $order->order_reference }}</strong></span>
                @endif
                <p>{{ __('shop.checkout_cancel_order_back_to_shop') }}</p>
            </div>

            <div class="contact-btn mt-4">
                <a href="{{ route('shop') }}" class="fv-btn btn rounded-0">{{ __('shop.order_back_to_shop') }}</a>
            </div>
        </div>
    </div>
</div>


@endsection