@extends('base::layouts.master')
@section('title',__('Payment information'))
@section('content')

    <div class="intro-y flex flex-col sm:flex-row items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">
            @lang('Payment information')
        </h2>
{{--        <div class="w-full sm:w-auto flex mt-4 sm:mt-0">--}}
{{--            <button class="btn btn-primary shadow-md mr-2">Print</button>--}}
{{--            <div class="dropdown ml-auto sm:ml-0">--}}
{{--                <button class="dropdown-toggle btn px-2 box" aria-expanded="false" data-tw-toggle="dropdown">--}}
{{--                    <span class="w-5 h-5 flex items-center justify-center"> <i class="w-4 h-4" data-lucide="plus"></i> </span>--}}
{{--                </button>--}}
{{--                <div class="dropdown-menu w-40">--}}
{{--                    <div class="dropdown-content">--}}
{{--                        <a href="" class="dropdown-item"> <i data-lucide="file" class="w-4 h-4 mr-2"></i> Export Word </a>--}}
{{--                        <a href="" class="dropdown-item"> <i data-lucide="file" class="w-4 h-4 mr-2"></i> Export PDF </a>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
    </div>

    <!-- BEGIN: Invoice -->
    <div class="intro-y box overflow-hidden mt-5">
        <div class="flex flex-col lg:flex-row pt-10 px-5 sm:px-20 sm:pt-20 lg:pb-20 text-center sm:text-left">
            <div class="font-semibold text-primary text-3xl">@lang('Invoice')</div>
            <div class="mt-20 lg:mt-0 lg:ml-auto lg:text-right">
                <div class="text-xl text-primary font-medium">{{AppHelper::settings()->getAttribute('app_name')}}</div>
                <div class="mt-1">{{AppHelper::settings()->getAttribute('app_email')}}</div>
                <div class="mt-1">{{AppHelper::settings()->getAttribute('app_address')}}</div>
            </div>
        </div>
        <div class="flex flex-col lg:flex-row border-b px-5 sm:px-20 pt-10 pb-10 sm:pb-20 text-center sm:text-left">
            <div>
                <div class="text-base text-slate-500">@lang('Client Details')</div>
                <div class="text-lg font-medium text-primary mt-2">{{$payment->fullName()}}</div>
                <div class="mt-1">{{$payment->getAttribute('email')}}</div>
                <div class="mt-1">{{$payment->getAttribute('address')}}</div>
            </div>
            <div class="mt-10 lg:mt-0 lg:ml-auto lg:text-right">
                <div class="text-base text-slate-500">Receipt</div>
                <div class="text-lg text-primary font-medium mt-2">#{{$payment->getAttribute('transaction_id')}}</div>
                <div class="mt-1">{{$payment->getAttribute('created_at')->format('d/m/Y')}}</div>
            </div>
        </div>
        <div class="px-5 sm:px-16 py-10 sm:py-20">
            <div class="overflow-x-auto">
                <table class="table">
                    <thead>
                    <tr>
                        <th class="border-b-2 dark:border-darkmode-400 whitespace-nowrap">DESCRIPTION</th>
                        <th class="border-b-2 dark:border-darkmode-400 text-right whitespace-nowrap">QTY</th>
                        <th class="border-b-2 dark:border-darkmode-400 text-right whitespace-nowrap">PRICE</th>
                        <th class="border-b-2 dark:border-darkmode-400 text-right whitespace-nowrap">SUBTOTAL</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($payment->order->products as $product)
                        <tr>
                            <td class="border-b dark:border-darkmode-400">
                                <div class="font-medium whitespace-nowrap">{{$product->title()}}</div>
                                <div class="text-slate-500 text-sm mt-0.5 whitespace-nowrap">{{$product->category->title()}}</div>
                            </td>
                            <td class="text-right border-b dark:border-darkmode-400 w-32">{{$product->pivot->getAttribute('count')}}</td>
                            <td class="text-right border-b dark:border-darkmode-400 w-32">{{$product->pivot->getAttribute('price')}} ₼</td>
                            <td class="text-right border-b dark:border-darkmode-400 w-32 font-medium">{{$product->pivot->getAttribute('total')}} ₼</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="px-5 sm:px-20 pb-10 sm:pb-20 flex flex-col-reverse sm:flex-row">
            <div class="text-center sm:text-right sm:ml-auto">
                <div class="text-base text-slate-500">@lang('Total paid')</div>
                <div class="text-xl text-primary font-medium mt-2">{{optional($payment->order)->getAttribute('grand_total')}} ₼</div>
            </div>
        </div>
    </div>
    <!-- END: Invoice -->

@endsection