@extends('frontend.layout.applayout')
@section('title', 'order-details')
@section('main-content')
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                @include('components.customer-profile')
            </div>
            <div class="col-lg-8">
                <div class="add_box">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingOne">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Order Information
                            </button>
                        </h2>
                        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="section-title p-2 fw-semibold fs-6 bg-light">
                                            <span>Order Information</span>
                                        </div>
                                        <table class="table table-sm">
                                            <tbody>
                                                <tr>
                                                    <td class="col-4"> Order Date </td>
                                                    <td class="col-8">{{ $order->created_at->format('Y-m-d H:i:s A') }}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="col-4"> Order Status</td>
                                                    <td class="col-8">{{ $order->status }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="col-4"> Shops</td>
                                                    <td class="col-8">-|-</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="section-title p-2 fw-semibold fs-6 bg-light">
                                            <span>Account Information</span>
                                        </div>
                                        <table class="table table-sm">
                                            <tbody>
                                                <tr>
                                                    <td class="col-4"> Company Name </td>
                                                    <td class="col-8">{{ $order->company_name }}</td>
                                                </tr>
                                                <tr>
                                                    <td class="col-4"> Contact Customer </td>
                                                    <td class="col-8">{{ $order->customer_name }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingTwo">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                Products Ordered
                            </button>
                        </h2>
                        <div id="collapseFour" class="accordion-collapse collapse show" aria-labelledby="headingFour"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th scope="col">Sl</th>
                                            <th scope="col">images</th>
                                            <th scope="col">Product Name</th>
                                            <th scope="col">SKU</th>
                                            <th scope="col">Quantity</th>
                                            <th scope="col">Price</th>

                                            <th scope="col">Grand Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($order->items as $key => $item)
                                            <tr>
                                                <td>{{ $key + 1 }}</td>
                                                <td>
                                                    @if (count($item->product->images))
                                                        <img src="{{ asset($item->product->images[0]->image_url) }}"
                                                            width="70px" height="70px">
                                                    @else
                                                        <img src="{{ asset('frontend/assets/images/cash-carry.png') }}"
                                                            class="img-fluid product-thumb">
                                                    @endif
                                                </td>
                                                <td>{{ $item->name }}</td>
                                                <td>{{ $item->sku }}</td>
                                                <td>{{ $item->quantity }}</td>
                                                <td>${{ $item->price }}</td>
                                                <td>${{ $item->total_amount }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <div class="sale-summary">
                                    <table class="table table-striped">
                                        <tbody>
                                            <tr>
                                                <td>Subtotal</td>
                                                <td>-</td>
                                                <td class="width150">
                                                    ${{ number_format($order->total_amount ?? 0, 2) }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Tax </td>
                                                <td>-</td>
                                                <td> ${{ number_format($order->tax_total ?? 0, 2) }} </td>
                                            </tr>
                                            <tr>
                                                <td>Discount </td>
                                                <td>-</td>
                                                <td> ${{ number_format($order->discount_amount ?? 0, 2) }}
                                                </td>
                                            </tr>

                                            <tr class="fw-bold pt-2">
                                                <td>Grand Total</td>
                                                <td>-</td>
                                                <td>${{ number_format($order->grand_total ?? 0, 2) }}</td>
                                            </tr>
                                            <tr>
                                                <td colspan="3">
                                                    <button class="btn btn-primary" id="reorder-btn">Reorder</button>
                                                   
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        td {
            padding: 7px 10px !important;
            font-size: 14px !important;
        }

        .sale-summary .table-striped {
            width: 40%;
            margin-left: auto;
        }
    </style>
    @push('scripts')
        <script>
            document.getElementById('reorder-btn').addEventListener('click', function() {
                let orderId = '{{ $order->id }}';
                window.location.href = `https://versova.ca/beta/public/order/reorder/${orderId}`;
            });
        </script>
    @endpush
@endsection