@extends("front/layout.master")
@php
    $user = Auth::user();
    $sellerac = App\Store::where('user_id','=', $user->id)->first();
@endphp
@section('title', __('staticwords.MyFailedTrancations') . ' | ')

@section("body")

<div class="max-w-[1400px] mx-auto px-4 lg:px-6 pt-5">
    <nav class="breadcrumb-row text-[12px] text-slate-500 flex items-center gap-1.5 leading-none">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <span class="text-deep font-medium">{{ __('staticwords.MyFailedTrancations') }}</span>
    </nav>
</div>

<section class="max-w-[1400px] mx-auto px-4 lg:px-6 mt-5 grid lg:grid-cols-[300px_1fr] gap-5 pb-12">
    <aside class="lg:sticky lg:top-28 lg:self-start">
        @include('user.sidebar')
    </aside>

    <div class="space-y-5">
        <div class="bg-white rounded-2xl shadow-card p-6 lg:p-8">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-12 h-12 bg-rose-50 rounded-xl grid place-items-center text-rose-500">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
                </div>
                <div>
                    <h1 class="font-display font-extrabold text-2xl">{{ __('staticwords.MyFailedTranscations') }}</h1>
                    <p class="text-[13px] text-slate-500">{{ auth()->user()->failedtxn->count() }} {{ __('failed transactions') }}</p>
                </div>
            </div>

            @if(count($failedtranscations) > 0)
                <div class="overflow-x-auto -mx-2 lg:mx-0">
                    <table class="w-full text-[13px]">
                        <thead>
                            <tr class="border-b border-slate-200 text-left text-[11px] uppercase tracking-wider text-slate-500">
                                <th class="py-3 px-2">#</th>
                                <th class="py-3 px-2">{{ __('TXN ID') }}</th>
                                <th class="py-3 px-2">{{ __('Time') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($failedtranscations as $key => $ftxn)
                                <tr class="border-b border-slate-100 hover:bg-slate-50">
                                    <td class="py-3 px-2 text-slate-500">{{ $failedtranscations->firstItem() + $key }}</td>
                                    <td class="py-3 px-2 font-mono font-semibold tabular">{{ $ftxn->txn_id }}</td>
                                    <td class="py-3 px-2 text-slate-600 tabular">{{ date('d M Y, h:i A', strtotime($ftxn->created_at)) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="mt-5 flex justify-center">
                    {!! $failedtranscations->links() !!}
                </div>
            @else
                <div class="text-center py-10">
                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" class="mx-auto text-slate-300"><circle cx="12" cy="12" r="9"/><path d="m9 9 6 6M15 9l-6 6"/></svg>
                    <h3 class="font-display font-bold text-lg mt-4">{{ __('No failed transactions') }}</h3>
                    <p class="text-[13px] text-slate-500 mt-1">{{ __("All your payments are going through smoothly.") }}</p>
                </div>
            @endif
        </div>
    </div>
</section>

@include('front.partials.change-password-modal')
@endsection

@section('script')
<script src="{{ url('js/profile.js') }}"></script>
@endsection