@extends('layouts.main')
@push('title')
    <title>Fit Sport Hub - My Order Details</title>
@endpush
@section('main-section')

<!-- Main Content -->
<main class="container mx-auto px-4 py-8 md:py-12">
    <div class="flex flex-col lg:flex-row gap-8">

        <!-- Left Sidebar -->
        <aside class="w-full lg:w-1/4">
            <div class="bg-white p-4 rounded-2xl shadow-xl border border-slate-200">
                <nav class="space-y-2">
                    <a href="{{ route('users.edits') }}" class="sidebar-link">
                        <i class="fas fa-user mr-3"></i>
                        <span>My Profile</span>
                    </a>
                    <a href="{{ route('order.index') }}" class="sidebar-link active">
                        <i class="fas fa-list mr-3"></i>
                        <span>My Orders</span>
                    </a>
                    <a href="/wishlist" class="sidebar-link">
                        <i class="fas fa-heart mr-3"></i>
                        <span>My Wish List</span>
                    </a>
                    <a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="sidebar-link">
                        <i class="fas fa-sign-out-alt mr-3"></i>
                        <span>Log Out</span>
                    </a>
                </nav>

                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
                    @csrf
                </form>
            </div>
        </aside>

        <!-- Right Content -->
        <div class="w-full lg:w-3/4">
            <div class="bg-white p-6 md:p-8 rounded-2xl shadow-xl border border-slate-200">
                
                @if (session()->has('success_message'))
                    <div class="mb-6 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
                        {{ session()->get('success_message') }}
                    </div>
                @endif

                @if(count($errors) > 0)
                    <div class="mb-6 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="flex justify-between items-center mb-6">
                    <h1 class="text-2xl font-bold">Order Details</h1>
                    <button class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded hover:bg-blue-700 transition" id="downloadInvoiceBtn">
                        <span class="button-text">Download Invoice</span>
                        <span class="spinner-border spinner-border-sm ml-2 hidden" role="status" aria-hidden="true"></span>
                    </button>
                    <input type="hidden" name="btndownload" value="{{ $order->id }}" id="btnorderid">
                </div>

                <div class="mb-8">
                    <h2 class="text-lg font-semibold mb-4">Order ID: {{ $order->id }}</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h3 class="text-sm font-medium text-gray-500 mb-1">Order Placed</h3>
                            <p class="text-gray-900">{{ presentDate($order->created_at) }}</p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h3 class="text-sm font-medium text-gray-500 mb-1">Order ID</h3>
                            <p class="text-gray-900">{{ $order->id }}</p>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h3 class="text-sm font-medium text-gray-500 mb-1">Final Amount</h3>
                            <p class="text-gray-900">Rs. {{ $order->billing_total }}</p>
                        </div>
                    </div>

                    <div class="mb-8">
                        <h3 class="text-lg font-semibold mb-4 border-b pb-2">Order Items</h3>
                        @php
                                $subtotal = 0;
                            @endphp
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead class="bg-gray-100">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Image</th>
                                        <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">MRP Price</th>
                                        <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Price</th>
                                         <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Gst</th>
                                         
                                        <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Quantity</th>
                                        <th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Total</th>
                                    </tr>
                                </thead>

                                <tbody class="divide-y divide-gray-200">
                                    @foreach ($products as $product)
                                    @php
                                        $product_total = $product->variant_price 
                                            ? ($product->variant_price * $product->product_quantity) 
                                            : ($product->after_discount * $product->product_quantity);
                                        $subtotal += $product_total;
                                    @endphp
                                    <tr>
                                        <td class="px-4 py-3">
                                            <img src="{{ asset($product->images) }}" alt="Product Image" class="w-16 h-16 object-cover rounded">
                                        </td>
                                           <td class="px-4 py-3">
                                            {{ $product->price }}
                                        </td>
                                        </td>
                                        <td class="px-4 py-3">
                                            @if ($product->variant_price)
                                                Rs. {{$product->variant_price}}
                                            @else
                                                Rs. {{$product->sale_price }}
                                            @endif
                                        </td>
                                         <td class="px-4 py-3">
                                         {{ !empty($product->gst_amount) ? $product->gst_amount : 0 }}

                          
                                        <td class="px-4 py-3">
                                            {{ $product->product_quantity }}
                                        </td>

                                        <td class="px-4 py-3">
                                            {{ $product->total_price  }}
                                        </td>

                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    @php
                        $gst = $subtotal * 0.18;
                        $grand_total = $subtotal + $gst;
                    @endphp

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <h3 class="text-lg font-semibold mb-4 border-b pb-2">Shipping Information</h3>
                            <div class="space-y-3">
                                <div>
                                    <p class="text-sm font-medium text-gray-500">Name</p>
                                    <p class="text-gray-900">{{ $order->user->name }}</p>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-500">Address</p>
                                    <p class="text-gray-900">{{ $order->billing_address }}</p>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-500">City</p>
                                    <p class="text-gray-900">{{ $order->billing_city }}</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-gray-50 p-6 rounded-lg">
                            <h3 class="text-lg font-semibold mb-4 border-b pb-2">Order Summary</h3>
                            <div class="space-y-3">
                                <!-- <div class="flex justify-between">
                                    <p class="text-sm font-medium text-gray-500">Subtotal</p>
                                    <p class="text-gray-900">Rs. {{ $grand_total }}</p>
                                </div> -->
                                <div class="flex justify-between">
                                                                        <p class="text-sm font-medium text-gray-500">Discount Amount</p>
                                    <p class="text-gray-900 font-semibold">Rs. {{$order->billing_discount  }}</p>
                                    <p class="text-sm font-medium text-gray-500">Final Amount</p>
                                    <p class="text-gray-900 font-semibold">Rs. {{ $order->billing_total - $order->billing_discount  }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

@endsection

@section('extrascripts')
<script>
$(document).on('click', '#downloadInvoiceBtn', function (e) {
    e.preventDefault(); // Prevent default link behavior

    var $button = $(this);
    var $buttonText = $button.find('.button-text');
    var $spinner = $button.find('.spinner-border');

    // Get the order ID
    var orderId = $('#btnorderid').val();

    // Show loader and disable button
    $button.prop('disabled', true);
    $spinner.removeClass('hidden');
    $buttonText.text('Processing...');

    // Send AJAX request
    $.ajax({
        url: '/api/order',
        type: 'GET', // Adjust the HTTP method if needed
        data: {
            order_id: orderId
        },
        xhrFields: {
            responseType: 'blob' // Expect a binary response
        },
        success: function (blob) {
            // Create a URL for the binary data
            var downloadUrl = window.URL.createObjectURL(blob);

            // Create a temporary link to trigger the download
            var link = document.createElement('a');
            link.href = downloadUrl;
            link.download = 'order_invoice_' + orderId + '.pdf'; // Suggested file name
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link); // Clean up the DOM
            window.URL.revokeObjectURL(downloadUrl); // Release memory
        },
        error: function (xhr, status, error) {
            console.error('Error downloading invoice:', error);
            alert('Failed to download invoice. Please try again.');
        },
        complete: function () {
            // Re-enable button and reset text
            $button.prop('disabled', false);
            $spinner.addClass('hidden');
            $buttonText.text('Download Invoice');
        }
    });
});
</script>
@endsection