@extends("artist-dashboard.layout.app")
@section("content")
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <h2 class="mainHeading">
                    Order details
                </h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{route('artist-dashboard')}}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{route('artist-order')}}">Orders</a></li>
                        <li class="breadcrumb-item active">All Orders</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <section class="orderDetailSec">
        <div class="container-fluid">
            <div class="row justify-content-center invoiceRow">
                <div class="col-md-10">
                    <div class="container-fluid">
                        <div class="row justify-content-between">
                            <div class="col-md-5">
                                <p><strong>INVOICE TO:</strong></p>
                                <p>
                                    John Peterson
                                    <br>
                                    Av 07, Mega Complex, New York
                                    <br>
                                    + 0123 456 789 000
                                </p>
                            </div>
                            <div class="col-md-5">
                                <div class="container-fluid">
                                    <div class="row" style="gap: 0.5rem 0;">
                                        <div class="col-md-6">
                                            <p><strong>Order No:</strong></p>
                                        </div>
                                        <div class="col-md-6">
                                            <p>Wanr1648101347</p>
                                        </div>
                                        <div class="col-md-6">
                                            <p><strong>Invoice No:</strong></p>
                                        </div>
                                        <div class="col-md-6">
                                            <p>012345</p>
                                        </div>
                                        <div class="col-md-6">
                                            <p><strong>Account:</strong></p>
                                        </div>
                                        <div class="col-md-6">
                                            <p>0000 12345 678900</p>
                                        </div>
                                        <div class="col-md-6">
                                            <p><strong>Date:</strong></p>
                                        </div>
                                        <div class="col-md-6">
                                            <p>06/02/2026</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="table-responsive">
                                    <table class="table table-striped table-dark text-center">
                                        <thead class="thead-dark">
                                        <tr>
                                            <th>SL</th>
                                            <th class="text-left">ITEM description</th>
                                            <th>Price</th>
                                            <th>Quantity</th>
                                            <th>Total</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @for($i = 1; $i <= 4; $i++)
                                            <tr>
                                                <td>{{$i}}</td>
                                                <td class="text-left">Cordless Compact Car Vacuum Cleaner</td>
                                                <td>$10</td>
                                                <td>1</td>
                                                <td>$10</td>
                                            </tr>
                                        @endfor
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-5">
                                <p><strong>PAYMENT INFO:</strong></p>
                                <p>
                                    Account: 1234567890
                                    <br>
                                    A/C Name:
                                    <br>
                                    Bank Details: Add your details
                                </p>
                            </div>
                            <div class="col-md-5">
                                <div class="container-fluid">
                                    <div class="row justify-content-end text-md-right">
                                        <div class="col-md-4">
                                            <p><strong>Sub Total:</strong></p>
                                            <p><strong>TAX:</strong></p>
                                        </div>
                                        <div class="col-md-4">
                                            <p>$50.00</p>
                                            <p>$5.00</p>
                                        </div>
                                    </div>
                                    <div class="row totalBox justify-content-end text-md-right">
                                        <div class="col-md-4">
                                            <p>Total:</p>
                                        </div>
                                        <div class="col-md-4">
                                            <p>$55.00</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection