@extends('backend.admin.layouts.app')
@section('content')
    <div class="pagetitle">
        <h1>Order</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                <li class="breadcrumb-item">Tables</li>
                <li class="breadcrumb-item active">Order</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        <div class="row">
            <div class="col-lg-12">

                <div class="card">
                    <div class="d-flex justify-content-end align-items-center me-5">
                        <div class="w-25 mt-5">
                            
                        </div>
                    </div>

                    <div class="card-body" id="printableArea">
                        <div class="d-flex align-items-center p-5">
                            <div class="billinv">
                                <div>
                                    <h4 class="fw-bold">Order Summary</h4>
                                    <div class="mt-4">
                                        <p class="p-0 m-0 fw-semibold">Billed to: {{ $orders->name }}</p>
                                        <p class="p-0 m-0 fw-semibold">Phone: {{ $orders->phone }}</p>
                                        <p class="p-0 m-0 fw-semibold">Address: {{ $orders->address }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="invid">
                                <div>
                                    <div>
                                        <img src="{{ asset('assets/img/logo/Logo.jpg') }}" alt="">
                                        <p class="p-0 m-0 logo-text fst-italic">The Brain</p>
                                    </div>

                                    <p class="p-0 m-0 fw-semibold mt-4">Invoice Id: {{ $orders->id }}</p>
                                    <p class="p-0 m-0 fw-semibold">Date: {{ $orders->created_at }}</p>
                                    <p class="p-0 m-0 fw-semibold">Type: Cash on delivery</p>
                                </div>
                            </div>
                        </div>

                        <h5 class="fw-bold">Order Details</h5>
                        <!-- Default Table -->
                        <table class="table border">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Name</th>
                                    <th scope="col">image</th>
                                    <th scope="col">Size</th>
                                    <th scope="col">Quantity</th>
                                    <th scope="col">Product Code</th>
                                    <th scope="col">Price</th>
                                    <th scope="col">Subtotal</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($orderDetails as $item)
                                    <tr>
                                        <th scope="row">{{ $loop->iteration }}</th>
                                        <td>{{ $item->product->name }}</td>
                                        <td>
                                            <img src="{{ asset('storage/' . $item->product->thumbnail) }}" alt=""
                                                width="80" height="80">
                                        </td>
                                        <td>{{ $item->size }}</td>
                                        <td>{{ $item->quantity }}</td>
                                        <td>{{ $item->product_code }}</td>
                                        <td>{{ $item->product->price }}</td>
                                        <td>{{ $item->price }}</td>
                                    </tr>
                                @endforeach
                                <tr>
                                    <th></th>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td class="fw-bolder">Total (included shipping charge and discount):</td>
                                    <td>{{ $orders->total_price }}</td>
                                </tr>
                               
                            </tbody>
                        </table>

                        <!-- End Default Table Example -->
                    </div>

                    <div class="d-flex justify-content-end align-items-center p-5">
                        <div class="me-5">
                            <button onclick="printOrder()" class="btn btn-primary">Print</button>
                        </div>
                        <div>
                            <h6 class="m-0 fw-bold">Update Status :</h6>
                        </div>
                        <form action="{{ route('admin.order-update', $orders->id) }}"
                            class="w-25 d-flex justify-content-end" method="POST">
                            @csrf
                            @method('put')
                            <button type="submit" name="status" value="pending"
                                class="border border-0 badge bg-primary pending m-1">Pending</button>
                            <button type="submit" name="status" value="on-hold"
                                class="border border-0 badge bg-warning on-hold m-1">On-hold</button>
                            <button type="submit" name="status" value="completed"
                                class="border border-0 badge bg-success completed m-1">Completed</button>
                            <button type="submit" name="status" value="cancelled"
                                class="border border-0 badge bg-danger cancelled m-1">Cancelled</button>
                        </form>
                    </div>
                </div>

            </div>

        </div>
    </section>
@endsection
@push('style')
    <style>
        .billinv {
            width: 60%;
        }

        .invid {
            width: 40%;
            margin-left: 20%;
        }

        .logo-text {
            font-size: 13px;
        }
    </style>
@endpush
@push('script')
    <script>
        function printOrder() {
            var printContent = document.getElementById("printableArea").innerHTML;
            var originalContent = document.body.innerHTML;

            document.body.innerHTML = printContent;
            window.print();
            document.body.innerHTML = originalContent;
            location.reload(); 
        }
    </script>
@endpush