@extends('layouts.frontend')

@section('headerMeta')
    <title>{{$siteInfo->site_name}} | Your Order Invoice Details</title>
    <meta name="title" content="{{$siteInfo->site_name}} | Your Order Invoice Details">
@endsection

@section('content')

    
    <header class="bg-[#F4FAFF]">
        <div class="container">
            <div class="logo flex justify-center items-center py-4">
                <a href="{{ route('home') }}">
                    <img class="h-10 w-auto" src="{{asset($siteInfo->logo)}}" alt="Logo">
                </a>
            </div>
        </div>
    </header>

    <section class="section_padding font-heading">
        <div class="container">
            <div class="grid xl:grid-cols-[8fr_4fr] items-start gap-8">
                <div>
                    <div
                        class="grid sm:grid-cols-2 lg:grid-cols-4 gap-3 bg-[rgba(237,242,255,0.40)] rounded-[10px] border border-[#D5E1FF] divide-y sm:divide-y-0 sm:divide-x">
                        @foreach ($cardData as $key => $row)
                            <div class="flex flex-col items-center text-center overflow-hidden p-3">

                                <span class="text-primary">{!!$row['icon']!!}</span>

                                <span class="text-base mt-2">{{$row['title']}} </span>

                                <strong class="text-black text-base lg:text-lg">{{ $row['value'] }}</strong>
                            </div>
                        @endforeach

                        <div class="flex flex-col items-center text-center  overflow-hidden p-3">
                            <svg class="text-primary" width="32" height="32" viewBox="0 0 40 40" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M24.7513 6.58341V12.9167H22.2513V6.58341C22.2513 6.13341 21.8513 5.91675 21.5846 5.91675C21.5013 5.91675 21.418 5.93341 21.3346 5.96675L8.11797 10.9501C7.23464 11.2834 6.66797 12.1167 6.66797 13.0667V14.1834C5.1513 15.3167 4.16797 17.1334 4.16797 19.1834V13.0667C4.16797 11.0834 5.38464 9.31675 7.23464 8.61675L20.468 3.61675C20.8346 3.48341 21.218 3.41675 21.5846 3.41675C23.2513 3.41675 24.7513 4.76675 24.7513 6.58341Z"
                                    fill="currentColor"/>
                                <path
                                    d="M35.8318 24.1666V25.8333C35.8318 26.2833 35.4818 26.6499 35.0152 26.6666H32.5818C31.6985 26.6666 30.8985 26.0166 30.8318 25.1499C30.7818 24.6333 30.9818 24.1499 31.3152 23.8166C31.6152 23.4999 32.0318 23.3333 32.4818 23.3333H34.9985C35.4818 23.3499 35.8318 23.7166 35.8318 24.1666Z"
                                    fill="currentColor"/>
                                <path
                                    d="M32.468 21.5834H34.168C35.0846 21.5834 35.8346 20.8334 35.8346 19.9167V19.1834C35.8346 15.7334 33.018 12.9167 29.568 12.9167H10.4346C9.01797 12.9167 7.71797 13.3834 6.66797 14.1834C5.1513 15.3167 4.16797 17.1334 4.16797 19.1834V30.4001C4.16797 33.8501 6.98464 36.6667 10.4346 36.6667H29.568C33.018 36.6667 35.8346 33.8501 35.8346 30.4001V30.0834C35.8346 29.1667 35.0846 28.4167 34.168 28.4167H32.718C31.118 28.4167 29.5846 27.4334 29.168 25.8834C28.818 24.6167 29.2346 23.4001 30.068 22.5834C30.6846 21.9501 31.5346 21.5834 32.468 21.5834ZM23.3346 21.2501H11.668C10.9846 21.2501 10.418 20.6834 10.418 20.0001C10.418 19.3167 10.9846 18.7501 11.668 18.7501H23.3346C24.018 18.7501 24.5846 19.3167 24.5846 20.0001C24.5846 20.6834 24.018 21.2501 23.3346 21.2501Z"
                                    fill="currentColor"/>
                            </svg>

                            <span class="text-base mt-2">Payment Status</span>

                            @if ($invoiceInfo->status == 'paid')
                                <span class="inline-block text-base lg:text-lg font-bold text-green-500">Paid</span>
                            @elseif($invoiceInfo->status == 'processing')
                                <span
                                    class="inline-block text-base lg:text-lg font-bold text-blue-600">Processing</span>
                            @elseif($invoiceInfo->status == 'pending')
                                <span class="inline-block text-base lg:text-lg font-bold text-yellow-600">Pending</span>
                            @else
                                <span class="inline-block text-base lg:text-lg font-bold text-red-600">Unpaid</span>
                            @endif
                        </div>
                    </div>

                    <div class="border my-8 border-[#D5E1FF]/40 rounded-[10px]">
                        <div
                            class="bg-darkblue rounded-t-[10px] border-[#D5E1FF] p-3 text-[#fff] text-2xl text-center font-medium shadow-md">
                            Invoice
                        </div>

                        {{-- Billing Details --}}
                        <div class="grid lg:grid-cols-2 gap-7 lg:gap-0 py-3 md:py-4">
                            <div class="lg:border-e-2 px-4 md:px-5">
                                <h2 class="text-black text-lg md:text-xl leading-none font-semibold mb-2">
                                    Billing From
                                </h2>

                                <ul class="flex flex-col gap-0.5 md:gap-1 text-sm md:text-base text-[#515151]">
                                    <li class="flex items-start flex-col md:flex-row">
                                        <span class="text-black shrink-0" style="width: 150px">Company Name </span>
                                        <span
                                            class="flex-1 [text-indent:-8px] pl-1">: {{ $companyName }}</span>
                                    </li>

                                    <li class="flex items-start flex-col md:flex-row">
                                        <span class="text-black shrink-0" style="width: 150px">Email </span>
                                        <span
                                            class="flex-1 [text-indent:-8px] pl-1">: {{ $companyEmail }}</span>
                                    </li>

                                    <li class="flex items-start flex-col md:flex-row">
                                        <span class="text-black shrink-0" style="width: 150px">Phone </span>
                                        <span
                                            class="flex-1 [text-indent:-8px] pl-1">: {{ $companyMobile }}</span>
                                    </li>

                                    <li class="flex items-start flex-col md:flex-row">
                                        <span class="text-black shrink-0" style="width: 150px">Office Address </span>
                                        <span
                                            class="flex-1 [text-indent:-8px] pl-1">: {{ $companyAddress }}</span>
                                    </li>
                                </ul>
                            </div>

                            <div class=" px-5 md:px-6 lg:px-[30px]">
                                <h2 class="text-black text-lg md:text-xl leading-none font-semibold mb-2">
                                    Billing To
                                </h2>

                                <ul class="flex flex-col gap-0.5 md:gap-1 text-sm md:text-base text-[#515151]">

                                    <li class="flex items-start flex-col md:flex-row">
                                        <span class="text-black w-20 md:w-24 shrink-0">Name </span>
                                        <span class="flex-1 [text-indent:-8px] pl-1">: {{$customerName}}</span>
                                    </li>


                                    <li class="flex items-start flex-col md:flex-row">
                                        <span class="text-black w-20 md:w-24 shrink-0">Email </span>
                                        <span class="flex-1 [text-indent:-8px] pl-1">: {{$customerEmail}}</span>
                                    </li>

                                    @if(!empty($customerMobile))
                                        <li class="flex items-start flex-col md:flex-row">
                                            <span class="text-black w-20 md:w-24 shrink-0">Phone </span>
                                            <span class="flex-1 [text-indent:-8px] pl-1">: {{$customerMobile}}</span>
                                        </li>
                                    @endif

                                    @if(!empty($customerAddress))
                                        <li class="flex items-start flex-col md:flex-row">
                                            <span class="text-black w-20 md:w-24 shrink-0">Address </span>
                                            <span class="flex-1 [text-indent:-8px] pl-1">: {{$customerAddress}}</span>
                                        </li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                    </div>

                    @foreach ($orderList as $key => $order)
                        <div class="overflow-x-auto">
                            @if(!empty($order->orderItem))
                                <table
                                    class="w-full border text-base rounded-[10px] bg-white mb-0 [&_th]:px-3 [&_th]:py-2.5 [&_td]:px-3 [&_td]:py-2.5 [&_td]:border [&_th]:border [&_th]:border-[#D5E1FF]">
                                    <tr class="text-left bg-[#E5E8F3] text-[#0A0A0A]">
                                        <th>Order Details</th>
                                        <th class="computer_header w-[185px]">
                                        </th>
                                        <th class="mobile_header w-9">
                                        </th>
                                        <th></th>
                                    </tr>
                                    <tr>
                                        <td colspan="3" class="text-start ">
                                            <div>
                                                <p>
                                                    <span class="text-black font-bold">Order ID: </span>
                                                    <span>{{ $order->order_no }}</span>
                                                </p>

                                                <p>
                                                    <span class="text-black font-bold">Billing Type: </span>
                                                    <span>{{ $order->billType?->name }}</span>
                                                </p>

                                                <p>
                                                    <span class="text-black font-bold">Order Date: </span>
                                                    <span>{{ date('d F, Y', strtotime($order->created)) }}</span>
                                                </p>
                                            </div>
                                        </td>
                                    </tr>
                                    @foreach ($order->orderItem as $row => $items)
                                        <tr class="odd:bg-[#F9FCFF] group">
                                            <td colspan="2" class="border group-odd:border-[#D5E1FF] text-[#515151]">
                                                <span class="text-bold">{{ $items->live_url }}</span>
                                                @if($order->billType?->name == "Link Insertion On")
                                                    @php($anchorText = json_decode($items->anchor))
                                                    @foreach($anchorText as $anchor)
                                                        <div>
                                                            <span
                                                                class="text-black mr-2">{{ $anchor->anchor_text }}: </span>
                                                            <span> {{ $anchor->link }}</span>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </td>

                                            <td class="w-40 border-r-0 group-odd:border-[#D5E1FF] text-[#515151] text-right">
                                                ${{ $items->total }}
                                            </td>
                                        </tr>
                                    @endforeach

                                                                    </table>
                            @endif
                        </div>
                    @endforeach

                    @if(!empty($invoiceList) && $invoiceList->isNotEmpty())
                        <div class="mt-8">
                            <table
                                class="w-full border text-base rounded-[10px] bg-white mb-0 [&_th]:px-3 [&_th]:py-2.5 [&_td]:px-3 [&_td]:py-2.5 [&_td]:border [&_th]:border [&_th]:border-[#D5E1FF]">
                                <tr class=" bg-[#E5E8F3] text-[#0A0A0A]">
                                    <th colspan="5" class="text-left">Others Invoice</th>
                                </tr>
                                <tr>
                                    <th class="text-left">Invoice No.</th>
                                    <th class="text-left">Date</th>
                                    <th class="text-left">Status</th>
                                    <th class="!text-right">Total</th>
                                    <th class="!text-right">Action</th>
                                </tr>
                                @foreach ($invoiceList as $row)
                                    <tr>
                                        <td><a href="{{url('invoice', $row->ref_code)}}"
                                               class="text-blue-600 hover:underline">#{{$row->invoice_no}}</a></td>
                                        <td>{{$row->created}} </td>
                                        <td>
                                <span class="badge {{($row->is_payment == 1 ? 'badge-success' : 'badge-danger')}}">
                                    {{($row->is_payment == 1 ? 'Paid' : 'Unpaid') }}
                                </span>
                                        </td>
                                        <td class="!text-right">${{$row->grand_total}}</td>
                                        <td class="w-10">
                                            <div class="flex items-center justify-center">
                                                <a href="{{url('invoice', $row->ref_code)}}" class="show-action-btn">
                                                    <svg stroke="currentColor" fill="currentColor" stroke-width="0"
                                                         viewBox="0 0 576 512" height="1em" width="1em"
                                                         xmlns="http://www.w3.org/2000/svg">
                                                        <path
                                                            d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z">
                                                        </path>
                                                    </svg>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach

                            </table>

                            {{ $invoiceList->links() }}
                        </div>
                    @endif
                </div>

                <div class="sticky top-4 space-y-5">
                    <div class="rounded border p-4 pb-8 overflow-hidden grid gap-5">
                        <h2 class="text-xl font-bold uppercase text-[#031F42]  whitespace-nowrap">Total Order Summery
                        </h2>

                        <div
                            class="flex flex-col text-lg text-black [&_>_div]:flex [&_>_div]:items-center [&_>_div]:border-b  [&_>_div]:justify-between [&_>_div]:font-semibold [&_>_div]:py-2">
                            <div>
                                <span>Sub Total</span>
                                <span>${{ $invoiceInfo->subtotal }}</span>
                            </div>

                            <div>
                                <span>Discount</span>
                                <span>${{ $invoiceInfo->discount }}</span>
                            </div>

                            <div>
                                <span>Total</span>
                                <span>${{ $invoiceInfo->grand_total }}</span>
                            </div>
                        </div>
                    </div>

                    @if ($invoiceInfo->status == 'unpaid')
                        @if(empty($invoiceInfo->method_id))
                            @include('components.frontend.payment.multiple')
                        @else
                            @if(in_array($paymentMethod->slug, config('custom.stripe-list')))
                                @include('components.frontend.payment.stripe')
                            @elseif(in_array($paymentMethod->slug, config('custom.paypal-list')))
                                @include('components.frontend.payment.paypal')
                            @elseif(in_array($paymentMethod->slug, config('custom.bank-list')))
                                @include('components.frontend.payment.bank')
                            @endif
                        @endif
                    @endif

                    <div class="flex justify-center items-center gap-4 pt-5">
                        <a href="{{ url('download-invoice', $invoiceInfo->ref_code) }}" onclick="downloadPDF(event)"
                           class="primary-btn !bg-primary rounded-full px-6">
                            Download
                        </a>

                        <a href="{{ url('download-invoice', $invoiceInfo->ref_code) }}" target="_blank"
                           class="primary-btn border !bg-transparent !text-primary !border-primary hover:!text-white hover:!bg-primary rounded-full px-6">
                            View PDF
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection

@push('headerPartial')
    <style>
        #header {
            display: none;
        }

        .paypal {
            display: block;
            width: 100%;
            background: #FBC02D;
            text-align: center;
            border: 1px solid #FBC02D;
            border-radius: 5px;
        }

        .paypal img {
            width: 40%;
            height: auto;
            margin: 10px auto;
        }

        .stripe {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            width: 100%;
            background: #6772E5;
            font-size: 38px;
            font-weight: bold;
            color: #fff;
            border: 1px solid #6772E5;
            border-radius: 5px;
        }

        .stripe img {
            height: 35px;
            border-radius: 10px;
            margin-right: 15px;
        }

        .section_padding {
            padding: 35px 0;
        }

        .computer_header {
            display: table-cell;
        }

        .mobile_header {
            display: none;
        }

        .computer_view {
            display: table-cell;
        }

        .mobile_view {
            display: none;
        }

        #card-element {
            width: 100%
        }

        @media only screen and (max-width: 768px) {
            .computer_view {
                display: none;
            }

            .mobile_view {
                display: table-cell;
            }

            .computer_header {
                display: none;
            }

            .mobile_header {
                display: table-cell;
            }
        }

        @media only screen and (max-width: 375px) {

            .download,
            .view_pdf {
                padding: 8px 15px !important;
            }
        }
    </style>
@endpush

@push('footerPartial')
    <script>
        function downloadPDF(event) {
            event.preventDefault();
            var url = event.target.href;
            var anchor = document.createElement('a');
            anchor.href = url;
            anchor.download = '';
            anchor.style.display = 'none';
            document.body.appendChild(anchor);
            anchor.click();
            document.body.removeChild(anchor);
        }
    </script>
@endpush