@extends('backend.template.layouts.template-base')
@section('title', 'Manage Orders - Delivered Detail')

@section('content')

    <section>

        <div class="top-fixed">

            <div class="page-head-title mb-3">
                <a href="{{ route('backend.template.manage-orders.index') }}" class="d-inline-block">
                    <h2 class="text-title fw-semibold mb-0"><i class=" ri-arrow-left-s-line"></i> Order Details
                    </h2>
                </a>
            </div>

            <div class="card bg-color-lightGreen2 shadow-light rounded-4 p-3 p-md-4">

                <div class="row align-items-center">
                    <div class="col-md-8 col-12">
                        <div class="admin-card d-flex flex-row align-items-center gap-2">
                            <div>
                                <div class="d-flex gap-2 align-items-center">
                                    <h5 class="box-title mb-2">Order ID-OID001</h5>
                                </div>
                                <p class="mb-0 secondary-text fs-12">
                                    Placed On: 00/00/0000 <span class="fw-bold">| Order Delivered On: 00/00/0000 | Delivery
                                        Person Assigned:
                                        Person X</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-12">
                        <div class="d-flex flex-column align-items-end gap-2">
                            <p class="mb-0 secondary-text">Order Value</p>
                            <h3 class="mb-0 fw-semibold status-green">₹000</h3>
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <div class="row">

            {{-- card start --}}
            <div class="col-12 col-md-4">
                <div class="card-border">

                    <h4 class="table-head-text p-3 pt-4 pb-2">Order Timeline</h4>

                    <hr>

                    <div class="p-3 pt-2 order-timeline-section">

                        <div>
                            <div class="d-flex flex-row align-items-center justify-content-between mb-2">
                                <div class="d-flex align-items-center flex-row gap-2">
                                    <img src="{{ asset('backend/template/images/svg/cheked.svg') }}" alt="">
                                    <h6>Order Placed</h6>
                                </div>
                                <span>17th April, 2026</span>
                            </div>
                            <p>Order successfully placed by [Customer Name / Buyer ID]. Payment status: [Paid /Pending
                                /COD].</p>
                        </div>

                        <div>
                            <div class="d-flex flex-row align-items-center justify-content-between mb-2">
                                <div class="d-flex align-items-center  flex-row gap-2">
                                    <img src="{{ asset('backend/template/images/svg/cheked.svg') }}" alt="">
                                    <h6>Order Accepted</h6>
                                </div>
                                <span>17th April, 2026</span>
                            </div>
                            <p>Order reviewed and accepted by [Admin / Seller Name]. Items confirmed for processing.</p>
                        </div>

                        <div>
                            <div class="d-flex flex-row align-items-center  justify-content-between mb-2">
                                <div class="d-flex align-items-center  flex-row gap-2">
                                    <img src="{{ asset('backend/template/images/svg/cheked.svg') }}" alt="">
                                    <h6>Ready to Dispatch</h6>
                                </div>
                                <span>17th April, 2026</span>
                            </div>
                            <p>Order prepared and marked ready for dispatch. Packed items verified.</p>
                        </div>

                        <div>
                            <div class="d-flex flex-row align-items-center  justify-content-between mb-2">
                                <div class="d-flex align-items-center  flex-row gap-2">
                                    <img src="{{ asset('backend/template/images/svg/cheked.svg') }}" alt="">
                                    <h6>Out for Delivery</h6>
                                </div>
                                <span>17th April, 2026</span>
                            </div>
                            <p>Order handed over to delivery person [Delivery Agent Name].</p>
                        </div>

                        <div>
                            <div class="d-flex flex-row align-items-center  justify-content-between mb-2">
                                <div class="d-flex align-items-center  flex-row gap-2">
                                    <img src="{{ asset('backend/template/images/svg/cheked.svg') }}" alt="">
                                    <h6>Delivered On</h6>
                                </div>
                                <span>17th April, 2026</span>
                            </div>
                            <p>Order successfully delivered to [Customer Name] by delivery person [Delivery Name].</p>
                        </div>
                        
                    </div>

                </div>

            </div>
            {{-- card end --}}

            {{-- card start --}}
            <div class="col-12 col-md-8">
                <div class="card-border">

                    <div class="d-flex flex-row justify-content-between align-items-center p-3 pb-0">
                        <h4 class="table-head-text ">Order Line Items</h4>
                        <div class="d-flex flex-row gap-3 align-items-center">
                            <button type="button" class="button-green-text p-2 px-3">
                                <img src="{{ asset('backend/template/images/svg/print.svg') }}" alt="">
                                Print
                            </button>
                            <button type="button" class="button-outline-green p-2 px-3">
                                <img src="{{ asset('backend/template/images/svg/download.svg') }}" alt="">
                                Download
                            </button>
                        </div>
                    </div>

                    <hr>

                    <div class="p-3 pt-2 ">

                        <div class="card-border-gray p-4 order-list-tems-section">

                            <div class="d-flex flex-row justify-content-between align-items-center">
                                <div class="d-flex flex-row align-items-center gap-3">
                                    <img src="{{ asset('backend/template/images/logo/sm-header-logo.svg') }}"
                                        alt="">
                                    <div>
                                        <h3 class="">Chote<span class="color-orange">kisan</span></h3>
                                        <p class="">123 Industrial Estate, Sector 4, Coimbatore, <br> 123 456, India
                                        </p>
                                    </div>
                                </div>
                                <h2>ORDER</h2>
                            </div>


                            <div class="row mt-2 border-top py-3 border-bottom">
                                <div class="col-12 col-md-4 border-end p-3 pb-0">
                                    <h6 class="mb-1">Bill From:</h6>
                                    <p class="p-order text-sub-heading mb-1">Chotekisan,</p>
                                    <p class="p-order mb-0">123 Industrial Estate, Sector 4, Coimbatore, 123 456, India.</p>
                                </div>
                                <div class="col-12 col-md-4 border-end p-3 pb-0">
                                    <h6 class="mb-1">Bill To:</h6>
                                    <p class="p-order text-sub-heading mb-1">[Customer Name(if erxist)],</p>
                                    <p class="p-order mb-0">123 Industrial Estate, Sector 4, Coimbatore, 123 456, India.</p>
                                </div>
                                <div class="col-12 col-md-4 p-3 pb-0">
                                    <p class="p-order mb-1">Order ID: OID001</p>
                                    <p class="p-order mb-1">Placed On: 00/00/0000</p>
                                    <p class="p-order mb-1">Payment Type: COD</p>
                                    <p class="p-order mb-0">Order From: App</p>
                                </div>

                            </div>

                            <div class="table-responsive rounded-top-3 bg-white mt-3 ">

                                <table class="table table-nowrap align-middle">
                                    <thead class="all-table-head">
                                        <tr class="text-capitalize">
                                            <th class="p-3 table-head-content">Order line items</th>
                                            <th class="p-3 table-head-content">Unit</th>
                                            <th class="p-3 table-head-content">Qty</th>
                                            <th class="p-3 table-head-content">Unit Price ₹ </th>
                                            <th class="p-3 table-head-content">Discount</th>
                                            <th class="p-3 table-head-content">Total Price ₹ </th>
                                        </tr>
                                    </thead>
                                    <tbody class="list form-check-all sortable-table">
                                        <tr class="" data-id="1">
                                            <td class="table-body-content p-3">Lorem ipsum <br>லோரம் இப்சம்</td>
                                            <td class="table-body-content p-3">250g</td>
                                            <td class="table-body-content p-3">2</td>
                                            <td class="table-body-content p-3">00 ₹</td>
                                            <td class="table-body-content p-3">X%</td>
                                            <td class="table-body-content p-3">00 ₹ </td>
                                        </tr>
                                        <tr class="" data-id="1">
                                            <td class="table-body-content p-3">Lorem ipsum <br>லோரம் இப்சம்</td>
                                            <td class="table-body-content p-3">1Kg</td>
                                            <td class="table-body-content p-3">1</td>
                                            <td class="table-body-content p-3">00 ₹</td>
                                            <td class="table-body-content p-3">00 ₹ </td>
                                            <td class="table-body-content p-3">00 ₹ </td>
                                        </tr>
                                        <tr class="bg-color-lignGray" data-id="1">
                                            <td class="table-body-content p-3"></td>
                                            <td class="table-body-content p-3"></td>
                                            <td class="table-body-content p-3"></td>
                                            <td class="table-body-content p-3"></td>
                                            <td class="table-body-content p-3 text-muted">Sub Total</td>
                                            <td class="table-body-content p-3 text-muted">00 ₹</td>
                                        </tr>
                                        <tr class="bg-color-lignGray" data-id="1">
                                            <td class="table-body-content p-3"></td>
                                            <td class="table-body-content p-3"></td>
                                            <td class="table-body-content p-3"></td>
                                            <td class="table-body-content p-3"></td>
                                            <td class="table-body-content p-3 text-muted">Handling Charge</td>
                                            <td class="table-body-content p-3 text-muted">00 ₹</td>
                                        </tr>
                                        <tr class="bg-color-lignGray" data-id="1">
                                            <td class="table-body-content p-3"></td>
                                            <td class="table-body-content p-3"></td>
                                            <td class="table-body-content p-3"></td>
                                            <td class="table-body-content p-3"></td>
                                            <td class="table-body-content p-3 text-muted">Delivery Fee</td>
                                            <td class="table-body-content p-3 text-muted">00 ₹</td>
                                        </tr>
                                        <tr class="" data-id="1">
                                            <td class="table-body-content p-3"></td>
                                            <td class="table-body-content p-3"></td>
                                            <td class="table-body-content p-3"></td>
                                            <td class="table-body-content p-3"></td>
                                            <td class="table-body-content2 p-3">Grand Total</td>
                                            <td class="table-body-content2 p-3">00 ₹</td>
                                        </tr>
                                    </tbody>
                                </table>

                            </div>

                        </div>

                    </div>

                </div>

            </div>
            {{-- card end --}}

        </div>

    </section>

@endsection