@extends('backend.template.layouts.template-base')
@section('title', 'Manage Orders - Dispatch 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-flex flex-row gap-3 align-items-center">
                    <h2 class="text-title fw-semibold mb-0"><i class=" ri-arrow-left-s-line"></i> Order Details
                    </h2>
                    <span class="badge rounded-pill bg-orange-light color-orange ">Dispatch Pending</span>
                </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 | Order Accepted On: 00/00/0000 | <span class="fw-bold">
                                        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>

        {{-- card start --}}
        <div class="card-border">

            <div class="row">

                <div class="col-12">
                    <div class="d-flex flex-row justify-content-between align-items-center p-3 pb-1">
                        <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>
                            <button type="button" data-bs-toggle="modal" data-bs-target="#MarkOutForDeliveryModal"
                                class="button-green p-2 px-3">
                                <img src="{{ asset('backend/template/images/svg/check.svg') }}" alt="">
                                Mask as Out for Delivery
                            </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>

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

    </section>

    {{-- Mark as Out for Delivery modal --}}
    <div class="modal fade" id="MarkOutForDeliveryModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-16 overflow-hidden">

                <div class="modal-header bg-color-lightGreen">
                    <h3 class="color-green modal-title mb-0">Mark as Out for Delivery?</h3>
                    <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <p class="mb-0 text-title">Are you sure you want to mark
                        <span class="fw-semibold">[Order ID]</span>
                        as
                        <span class="fw-semibold">"Out for Delivery"?</span>
                    </p>

                    <p class="mb-0 secondary-text mt-1">Please confirm that the delivery person has picked up the order and
                        is on the way to the customer.</p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                    <button class="button-green ">Yes, Confirm</button>
                </div>

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

@endsection