@extends('Admin.layout')

@section('content')



<div class="d-flex align-items-center justify-content-between mb-3 mt-3">
    <div>
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('admin.new_order')  }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
            View Order
        </h5>
    </div>
    <div class="d-flex justify-content-between">
        <button type="button"
            class="btn btn-danger me-2"
            data-bs-toggle="modal"
            data-bs-target="#cancelOrderModal">
            Cancel Order
        </button>
        <button type="button"
            class="btn btn-success"
            data-bs-toggle="modal"
            data-bs-target="#confirmOrderModal">
            Confirm Order
        </button>
        
    </div>

</div>




    <div class="card shadow-sm border-0 mb-4">

        <div class="card-body p-4">

            <div class="d-flex flex-column flex-md-row
                        justify-content-between
                        align-items-md-start
                        gap-3">

                <div>

                    <h5 class="fw-bold mb-2">
                        Order #ORD1001
                    </h5>

                    <div class="text-muted">
                        Placed on 17 Aug 2026, 10:30 AM
                    </div>

                </div>


                <span class="badge bg-warning text-dark px-3 py-2">
                    New Order
                </span>

            </div>


            <hr>


            <div class="row g-4">

                {{-- ORDER ID --}}
                <div class="col-md-3">

                    <small class="text-muted d-block mb-1">
                        Order ID
                    </small>

                    <strong>
                        ORD1001
                    </strong>

                </div>


                {{-- ORDER DATE --}}
                <div class="col-md-3">

                    <small class="text-muted d-block mb-1">
                        Order Date
                    </small>

                    <strong>
                        17 Aug 2026
                    </strong>

                </div>


                {{-- ORDER STATUS --}}
                <div class="col-md-3">

                    <small class="text-muted d-block mb-1">
                        Order Status
                    </small>

                    <span class="badge bg-warning text-dark">
                        New
                    </span>

                </div>


                {{-- TOTAL --}}
                <div class="col-md-3">

                    <small class="text-muted d-block mb-1">
                        Order Total
                    </small>

                    <strong class="text-primary">
                        ₹25,048
                    </strong>

                </div>

            </div>

        </div>

    </div>



    <div class="row g-4">

        {{-- ===================================================== --}}
        {{-- LEFT COLUMN --}}
        {{-- ===================================================== --}}

        <div class="col-lg-8">


            {{-- ================================================= --}}
            {{-- CUSTOMER INFORMATION --}}
            {{-- ================================================= --}}

            <div class="card shadow-sm border-0 mb-4">

                <div class="card-body p-4">

                    <h6 class="fw-bold mb-4">
                        Customer Information
                    </h6>


                    <div class="row g-4">

                        <div class="col-md-6">

                            <small class="text-muted d-block mb-1">
                                Full Name
                            </small>

                            <strong>
                                Lunaa
                            </strong>

                        </div>


                        <div class="col-md-6">

                            <small class="text-muted d-block mb-1">
                                Phone Number
                            </small>

                            <strong>
                                9876543210
                            </strong>

                        </div>

                    </div>

                </div>

            </div>


            <div class="card shadow-sm border-0 mb-4">

                <div class="card-body p-4">

                    <h6 class="fw-bold mb-4">
                        Delivery Address
                    </h6>


                    <div class="border rounded-3 p-3">

                        <h6 class="fw-bold mb-2">
                            Lunaa
                        </h6>

                        <p class="text-muted mb-2">

                            123, ABC Street,<br>
                            Near XYZ Mall,<br>
                            Chennai,<br>
                            Tamil Nadu - 600001

                        </p>

                        <div class="text-muted">

                            <i class="fa-solid fa-phone me-2"></i>
                            9876543210

                        </div>

                    </div>

                </div>

            </div>


            <div class="card shadow-sm border-0 mb-4">

                <div class="card-body p-4">

                    <h6 class="fw-bold mb-4">
                        Delivery Information
                    </h6>


                    <div class="row g-4">

                        {{-- DELIVERY SPEED --}}
                        <div class="col-md-4">

                            <small class="text-muted d-block mb-1">
                                Delivery Speed
                            </small>

                            <strong>
                                Express Delivery
                            </strong>

                        </div>


                        {{-- EXPECTED DELIVERY --}}
                        <div class="col-md-4">

                            <small class="text-muted d-block mb-1">
                                Expected Delivery
                            </small>

                            <strong>
                                Wed, 19 Aug 2026
                            </strong>

                        </div>


                        {{-- DELIVERY CHARGE --}}
                        <div class="col-md-4">

                            <small class="text-muted d-block mb-1">
                                Delivery Charge
                            </small>

                            <strong>
                                ₹149
                            </strong>

                        </div>

                    </div>

                </div>

            </div>


            <div class="card shadow-sm border-0 mb-4">

                <div class="card-body p-4">

                    <h6 class="fw-bold mb-4">
                        Order Items
                    </h6>


                    <div class="table-responsive">

                        <table class="table align-middle mb-0">

                            <thead>

                                <tr>

                                    <th>PRODUCT</th>
                                    <th>SKU</th>
                                    <th>VARIANT</th>
                                    <th>PRICE</th>
                                    <th>QTY</th>
                                    <th>TOTAL</th>

                                </tr>

                            </thead>


                            <tbody>

                                <tr>

                                    <td>

                                        <div class="d-flex align-items-center gap-3">

                                            <img src="{{ asset('assets/img/diamond_ring.png') }}"
                                                 alt="Diamond Halo Ring"
                                                 width="60"
                                                 height="60"
                                                 class="rounded border object-fit-cover">

                                            <div>

                                                <strong class="d-block">
                                                    Diamond Halo Ring
                                                </strong>

                                                <small class="text-muted">
                                                    Gold
                                                </small>

                                            </div>

                                        </div>

                                    </td>


                                    <td>
                                        RING001
                                    </td>


                                    <td>
                                        Size 8
                                    </td>


                                    <td>
                                        ₹24,999
                                    </td>


                                    <td>
                                        1
                                    </td>


                                    <td>
                                        <strong>
                                            ₹24,999
                                        </strong>
                                    </td>

                                </tr>


                                <tr>

                                    <td>

                                        <div class="d-flex align-items-center gap-3">

                                            <img src="{{ asset('assets/img/diamond_ring.png') }}"
                                                 alt="Gold Bracelet"
                                                 width="60"
                                                 height="60"
                                                 class="rounded border object-fit-cover">

                                            <div>

                                                <strong class="d-block">
                                                    Gold Bracelet
                                                </strong>

                                                <small class="text-muted">
                                                    Gold
                                                </small>

                                            </div>

                                        </div>

                                    </td>


                                    <td>
                                        BR001
                                    </td>


                                    <td>
                                        7 Inches
                                    </td>


                                    <td>
                                        ₹12,000
                                    </td>


                                    <td>
                                        1
                                    </td>


                                    <td>
                                        <strong>
                                            ₹12,000
                                        </strong>
                                    </td>

                                </tr>

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

            <div class="card shadow-sm border-0 mb-4">

                <div class="card-body p-4">

                    <h6 class="fw-bold mb-4">
                        Payment Information
                    </h6>


                    <div class="row g-4">

                        {{-- PAYMENT METHOD --}}
                        <div class="col-md-4">

                            <small class="text-muted d-block mb-1">
                                Payment Method
                            </small>

                            <strong>
                                Card
                            </strong>

                        </div>
                        <div class="col-md-4">

                            <small class="text-muted d-block mb-1">
                                Card/UPI
                            </small>

                            <strong>
                                **** **** 5688
                            </strong>

                        </div>

                        {{-- PAYMENT STATUS --}}
                        <div class="col-md-4">

                            <small class="text-muted d-block mb-1">
                                Payment Status
                            </small>

                            <span class="badge bg-success text-dark">
                                Paid
                            </span>

                        </div>


                        {{-- TRANSACTION --}}
                        <div class="col-md-4">

                            <small class="text-muted d-block mb-1">
                                Transaction ID
                            </small>

                            <strong>
                                TRN7956g7f
                            </strong>

                        </div>

                         <div class="col-md-4">

                            <small class="text-muted d-block mb-1">
                                Paid On
                            </small>

                            <strong>
                                17/9/2026
                            </strong>

                        </div>


                    </div>

                </div>

            </div>

        </div>


        <div class="col-lg-4">


            <div class="card shadow-sm border-0 mb-4">

                <div class="card-body p-4">

                    <h6 class="fw-bold mb-4">
                        Order Summary
                    </h6>


                    <div class="d-flex justify-content-between mb-3">

                        <span class="text-muted">
                            Subtotal
                        </span>

                        <span>
                            ₹36,999
                        </span>

                    </div>


                    <div class="d-flex justify-content-between mb-3">

                        <span class="text-muted">
                            Discount
                        </span>

                        <span class="text-success">
                            -₹2,000
                        </span>

                    </div>


                    <div class="d-flex justify-content-between mb-3">

                        <span class="text-muted">
                            Delivery Charge
                        </span>

                        <span>
                            ₹0
                        </span>

                    </div>


                    <div class="d-flex justify-content-between mb-3">

                        <span class="text-muted">
                            COD Charge
                        </span>

                        <span>
                            ₹0
                        </span>

                    </div>


                    <div class="d-flex justify-content-between mb-3">

                        <span class="text-muted">
                            GST
                        </span>

                        <span>
                            ₹0
                        </span>

                    </div>


                    <hr>


                    <div class="d-flex justify-content-between">

                        <strong>
                            Total
                        </strong>

                        <strong class="text-primary fs-5">
                            ₹35,048
                        </strong>

                    </div>

                </div>

            </div>


            <div class="card shadow-sm border-0 mb-4">

                <div class="card-body p-4">

                    <h6 class="fw-bold mb-3">
                        Payment Method
                    </h6>


                    <div class="border rounded-3 p-3">

                        <div class="d-flex align-items-center gap-3">

                            <div class="rounded-circle
                                        bg-warning
                                        bg-opacity-10
                                        p-3">

                                <i class="fa-solid fa-money-bill-wave
                                          text-warning"></i>

                            </div>


                            <div>

                                <strong class="d-block">
                                    Cash on Delivery
                                </strong>

                                <small class="text-muted">
                                    ₹49 COD charge applied
                                </small>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>


</div>


<div class="modal fade"
     id="confirmOrderModal"
     tabindex="-1"
     aria-labelledby="confirmOrderModalLabel"
     aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title fw-bold"
                    id="confirmOrderModalLabel">

                    Confirm Order

                </h5>

                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal">
                </button>

            </div>


            <div class="modal-body">

                <p class="mb-0">

                    Are you sure you want to confirm
                    <strong>ORD1001</strong>?

                </p>

            </div>


            <div class="modal-footer">

                <button type="button"
                        class="btn btn-light"
                        data-bs-dismiss="modal">

                    Cancel

                </button>

                <form action="#" method="POST">

                    @csrf

                    <button type="submit"
                            class="btn btn-primary">

                        Confirm Order

                    </button>

                </form>

            </div>

        </div>

    </div>

</div>



{{-- ============================================================= --}}
{{-- CANCEL ORDER MODAL --}}
{{-- ============================================================= --}}

<div class="modal fade"
     id="cancelOrderModal"
     tabindex="-1"
     aria-labelledby="cancelOrderModalLabel"
     aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title fw-bold"
                    id="cancelOrderModalLabel">

                    Cancel Order

                </h5>

                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal">
                </button>

            </div>


            <form action="#"
                  method="POST">

                @csrf

                <div class="modal-body">

                    <p>
                        Are you sure you want to cancel
                        <strong>ORD1001</strong>?
                    </p>


                    <label for="cancelReason"
                           class="form-label">

                        Cancellation Reason

                    </label>

                    <select id="cancelReason"
                            name="cancel_reason"
                            class="form-select"
                            required>

                        <option value="">
                            Select reason
                        </option>

                        <option value="customer_request">
                            Customer Request
                        </option>

                        <option value="out_of_stock">
                            Product Out of Stock
                        </option>

                        <option value="payment_issue">
                            Payment Issue
                        </option>

                        <option value="other">
                            Other
                        </option>

                    </select>

                </div>


                <div class="modal-footer">

                    <button type="button"
                            class="btn btn-light"
                            data-bs-dismiss="modal">

                        Close

                    </button>


                    <button type="submit"
                            class="btn btn-danger">

                        Cancel Order

                    </button>

                </div>

            </form>

        </div>

    </div>



@endsection