@extends('Admin.layout')

@section('content')



<div class="d-flex flex-column flex-md-row
                align-items-md-center
                justify-content-between
                gap-3
                mb-4
                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.return_refund')  }}">
                    <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 Return & Refund
        </h5>
    </div>




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

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

    </div>

</div>

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

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

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


        <div class="row g-4">

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

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

                <strong>
                    RN001
                </strong>

            </div>


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

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

                <strong>
                    ORD1025
                </strong>

            </div>

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

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

                <strong>
                    18 Aug 2026
                </strong>

            </div>

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

                <small class="text-muted d-block mb-1">
                    Return Reason
                </small>

                <strong>
                    Damaged Product
                </strong>

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

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

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

            </div>

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

                <small class="text-muted d-block mb-1">
                    Return Type
                </small>

                <strong>
                    Product Return
                </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">
            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>
                    Aurela
                </strong>

            </div>

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

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

                <strong>
                    9876543210
                </strong>

            </div>


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

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

                <strong>
                    Aurela@example.com
                </strong>

            </div>


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

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

                <strong>
                    15 Aug 2026
                </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">
            Returned Product
        </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>

                </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">
            Return Details
        </h6>


        <div class="mb-4">

            <small class="text-muted d-block mb-1">
                Return Reason
            </small>

            <strong>
                Damaged Product
            </strong>

        </div>


        <div>

            <small class="text-muted d-block mb-1">
                Customer Note
            </small>

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

                The product was received with visible damage
                on the ring surface. Customer requested a
                replacement or refund.

            </p>

        </div>

    </div>

</div>


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

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

        <h6 class="fw-bold mb-4">
            Return Status
        </h6>


        <div class="row g-4">

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

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

                <strong>
                    18 Aug 2026
                </strong>

            </div>


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

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

                <strong>
                    -
                </strong>

            </div>


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

                <small class="text-muted d-block mb-1">
                    Product Received
                </small>

                <strong>
                    -
                </strong>

            </div>


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

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

                <span class="badge bg-secondary">
                    Pending
                </span>

            </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">
            Refund Information
        </h6>


        <div class="row g-4">

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

                <small class="text-muted d-block mb-1">
                    Refund Amount
                </small>

                <strong class="text-primary fs-5">
                    ₹24,999
                </strong>

            </div>


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

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

                <strong>
                    Original Payment Method
                </strong>

            </div>


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

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

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

            </div>


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

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

                <strong>
                    -
                </strong>

            </div>


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

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

                <strong>
                    -
                </strong>

            </div>


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

                <small class="text-muted d-block mb-1">
                    Refund Reference
                </small>

                <strong>
                    -
                </strong>

            </div>

        </div>

    </div>

</div>



{{-- ========================================================= --}}
{{-- ORIGINAL PAYMENT INFORMATION --}}
{{-- ========================================================= --}}

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

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

        <h6 class="fw-bold mb-4">
            Original 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>


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

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

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

            </div>


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

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

                <strong>
                    TRN7956g7f
                </strong>

            </div>


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

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

                <strong>
                    15 Aug 2026
                </strong>

            </div>

        </div>

    </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-center
                        gap-3">

            <div>

                <h6 class="fw-bold mb-1">
                    Return Action
                </h6>

                <small class="text-muted">
                    Review the return request and take appropriate action.
                </small>

            </div>


            <div class="d-flex gap-2">

                <button type="button"
                    class="btn btn-danger"
                    data-bs-toggle="modal"
                    data-bs-target="#rejectReturnModal">

                    Reject Return

                </button>


                <button type="button"
                    class="btn btn-primary"
                    data-bs-toggle="modal"
                    data-bs-target="#approveReturnModal">

                    Approve Return

                </button>

            </div>

        </div>

    </div>

</div>

</div>



@endsection