@extends('layouts.app')
@section('header-title', __('Order Details'))

@section('content')
    <div class="admin-return-order-show">
    <div class="row my-3 g-3">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between gap-2 py-3">
                    <h4 class="card-title mb-0">{{ __('Return Order Details') }}</h4>

                </div>
                <div class="card-body">
                    <div class="d-flex gap-3 flex-wrap align-items-center return-order-summary-grid">
                        <div class="flex-grow-1 return-order-summary-column">
                            <div class="order-item">
                                <label class="label">{{ __('Order Id') }}:</label>
                                <span
                                    class="value">#{{ $returnOrder->order->prefix . $returnOrder->order->order_code }}</span>
                            </div>
                            <div class="order-item">
                                <label class="label">{{ __('Payment Status') }}:</label>

                                <span class="value">{{ $returnOrder->order->payment_status }}</span>
                            </div>
                            <div class="order-item">
                                <label class="label">{{ __('Order Status') }}:</label>
                                <span class="value">{{ $returnOrder->order->order_status }}</span>
                            </div>
                            <div class="order-item">
                                <label class="label">{{ __('Order Date') }}:</label>
                                <span class="value">{{ $returnOrder->order->created_at->format('M d, Y') }}</span>
                            </div>
                        </div>

                        <div class="item-divider"></div>

                        <div class="flex-grow-1 return-order-summary-column">
                            <div class="order-item">
                                <label class="label">{{ __('Return Status') }}:</label>
                                <span class="value">{{ $returnOrder->status }}</span>
                            </div>
                            <div class="order-item">
                                <label class="label">{{ __('Return Payment Status') }}:</label>
                                <span class="value">{{ $returnOrder->payment_status ? 'Paid' : 'Unpaid' }}</span>
                            </div>
                            <div class="order-item">
                                <label class="label">{{ __('Return Date') }}:</label>
                                <span
                                    class="value">{{ $returnOrder->created_at ? Carbon\Carbon::parse($returnOrder->created_at)->format('M d, Y') : '-' }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive mt-4 mb-0">
                        <table class="table border-left-right return-order-products-table w-100">
                            <thead>
                                <tr>
                                    <th>{{ __('Product') }}</th>
                                    @if ($businessModel == 'multi')
                                        <th>{{ __('Shop') }}</th>
                                    @endif
                                    <th>{{ __('Quantity') }}</th>
                                    <th>{{ __('Size') }}</th>
                                    <th>{{ __('Color') }}</th>
                                    <th>{{ __('Price') }}</th>
                                    <th class="text-end">{{ __('Total') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($returnOrder->returnProduct as $product)
                                    <tr>
                                        <td>
                                            <div class="d-flex gap-1 align-items-center return-order-product-cell">
                                                <img src="{{ $product->product?->thumbnail }}" alt=""
                                                    width="40" height="40" loading="lazy">
                                                <span class="return-order-product-name">{{ $product->product->name ?? '-' }}</span>
                                            </div>
                                        </td>
                                        @if ($businessModel == 'multi')
                                            <td>{{ $returnOrder?->shop?->name }}</td>
                                        @endif
                                        <td>{{ $product->quantity ?? 0 }}</td>
                                        <td>{{ $product->size ?? '-' }}</td>
                                        <td>{{ $product->color ?? '-' }}</td>
                                        <td>
                                            {{ showCurrency($product->price) }}
                                        </td>
                                        <td class="text-end">
                                            {{ showCurrency($product->quantity * $product->price) }}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="max-300 ms-auto d-flex flex-column gap-1 return-order-total-box">
                        <div class="d-flex align-items-center justify-content-between gap-2">
                            <div> <strong>{{ __('Total') }}</strong></div>
                            <div>{{ showCurrency($returnOrder->amount) }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!--##### return reason #####-->
            <div class="mt-3 card">
                <h5 class="fz-16 border-bottom px-3 py-12 m-0">{{ __('Return Reason') }}</h5>

                <div class="border-bottom px-3 py-2 d-flex align-items-center gap-3 return-reason-row">
                    <span class="fw-medium">{{ $returnOrder->reason }}</span>
                </div>
            </div>

            <!--##### Customer Info #####-->
            <div class="mt-3 card">
                <h5 class="fz-16 border-bottom px-3 py-12 m-0">{{ __('Customer Info') }}</h5>

                <div class="border-bottom px-3 py-2 d-flex align-items-center gap-3 customer-info-row">
                    <span class="text-color">{{ __('Name') }}: </span>
                    <span class="fw-medium">{{ $returnOrder->customer?->user?->name }}</span>
                </div>
                <div class="px-3 py-2 d-flex align-items-center gap-3 customer-info-row">
                    <span class="text-color">{{ __('Phone') }}: </span>
                    <span class="fw-medium">{{ $returnOrder->customer?->user?->phone }}</span>
                </div>
            </div>
            @if ($returnOrder->status == 'Cancelled')
                <!--##### Cancelled Info #####-->
                <div class="mt-3 card">
                    <h5 class="fz-16 border-bottom px-3 py-12 m-0">{{ __('Cancel Reason') }}</h5>

                    <div class="border-bottom px-3 py-2 d-flex align-items-center gap-3 return-reason-row">
                        <span class="fw-medium">{{ $returnOrder->reject_note }}</span>
                    </div>
                </div>
            @endif


        </div>

        <div class="col-lg-4">
            <!--#####  Info #####-->
            <div class="card">
                <h5 class="fz-18 border-bottom p-3 m-0">{{ __('Return Order Status') }}</h5>

                <div class="px-3 py-2 d-flex justify-content-between align-items-center flex-wrap gap-2 border-bottom info-row">
                    <div class="text-color">{{ __('Change Order Status') }}</div>

                    <div class="dropdown info-row-control">
                        <a class="btn border text-start dropdown-toggle" href="#" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            {{ $returnOrder->status }}
                        </a>
                        @if ($returnOrder->status != 'Cancelled' && $returnOrder->status != 'Refunded' && auth()->user()->shop?->id == $returnOrder->shop_id)
                            @hasPermission(['shop.order.status.change'])
                                <ul class="dropdown-menu order-status">
                                    @foreach ($returnStatus as $status)
                                        <li>
                                            <a class="dropdown-item"
                                                href="{{ route('shop.returnOrder.status.change', $returnOrder->id) }}?status={{ $status->value }}">
                                                {{ __($status->value) }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            @endhasPermission
                        @endif
                    </div>

                </div>
                <div class="border-bottom d-flex justify-content-between align-items-center flex-wrap gap-2 p-3 info-row">
                    <div class="text-color">{{ __('Payment Status') }}</div>
                    <div class="d-flex align-items-center gap-1 info-row-control">
                        <span>{{ $returnOrder->payment_status ? 'Paid' : 'Unpaid' }}</span>
                        @if (!$returnOrder->payment_status)
                            @hasPermission('admin.returnOrder.payment.status')
                                <label class="switch mb-0">
                                    <a href="{{ route('admin.returnOrder.payment.status', $returnOrder->id) }}">
                                        <input type="checkbox" {{ $returnOrder->payment_status == 1 ? 'checked' : '' }}>
                                        <span class="slider round"></span>
                                    </a>
                                </label>
                            @endhasPermission
                        @endif

                    </div>
                </div>

                 @if ($returnOrder->payment_status == 0 && $returnOrder->status != 'Cancelled')
                    <div class="px-3 py-2 d-flex justify-content-between align-items-center flex-wrap gap-2 border-bottom info-row">
                        <div class="text-color">{{ __('Cancel Return ') }}</div>
                            @hasPermission('admin.returnOrder.reject')
                                <button type="button"
                                    @if ($returnOrder->status == 'Pending') disabled @else
                                        data-bs-toggle="modal" data-bs-target="#rejectModal" @endif
                                    class="btn btn-sm btn-danger">
                                    {{ __('Cancel') }}
                                </button>
                            @endhasPermission
                    </div>
                @endif

            </div>
            <!--##### Bank Info #####-->
            <div class="card">
                <h5 class="fz-18 border-bottom p-3 m-0">{{ __('Bank Information') }}</h5>

                <div class="border-bottom d-flex justify-content-between align-items-center flex-wrap gap-2 p-3 info-row">
                    <div class="text-color">{{ __('Account No') }}</div>
                    <div class="d-flex align-items-center gap-1 info-row-control">
                        <span>{{ $returnOrder->bank_account_number }}</span>
                    </div>
                </div>

            </div>

            <!--##### Shipping Address #####-->
            <div class="card mt-3">
                <h5 class="fz-18 border-bottom p-3 m-0">{{ __('Return Address') }}</h5>

                <div class="border-bottom d-flex align-items-center justify-content-between gap-2 px-3 py-12 return-address-row">
                    <span class="fw-medium">{{ $returnOrder->return_address }}</span>
                </div>
            </div>

        </div>
    </div>
    <form action="{{ route('admin.returnOrder.reject', $returnOrder->id) }}" method="POST">
        @csrf
        <div class="modal fade" id="rejectModal" tabindex="-1">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            {{ __('Cancel Return Order') }}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">

                        <div class="mb-3">
                            <label for="reject_note" class="form-label">{{ __('Cancellation Note') }} *</label>
                            <textarea type="text" class="form-control" id="reject_note" name="reject_note" rows="5"
                                placeholder="Write cancel note here" required></textarea>
                            @error('reject_note')
                                <p class="text text-danger m-0">{{ $message }}</p>
                            @enderror

                            <input type="hidden" name="status" value="Cancelled">
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            {{ __('Close') }}
                        </button>
                        <button type="submit" class="btn btn-primary">
                            {{ __('Submit') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    </div>
@endsection
@push('css')
    <style>
        .admin-return-order-show .card,
        .admin-return-order-show .modal-content {
            max-width: 100%;
        }

        .admin-return-order-show .return-order-summary-column {
            min-width: 0;
        }

        .admin-return-order-show .return-order-products-table {
            width: max-content;
            min-width: 760px;
        }

        .admin-return-order-show .return-order-products-table td,
        .admin-return-order-show .return-order-products-table th {
            vertical-align: middle;
        }

        .admin-return-order-show .return-order-product-cell {
            min-width: 220px;
        }

        .admin-return-order-show .return-order-product-name {
            overflow-wrap: anywhere;
        }

        .admin-return-order-show .return-order-total-box {
            width: 100%;
        }

        .dropdown-menu.order-status {
            min-width: 200px;
            padding: 8px;
            border: 1px solid #e5e5e5;
            box-shadow: 0 0 10px #e5e5e5;
        }

        .dropdown-menu.order-status .dropdown-item {
            border-bottom: 1px solid #f1f1f1;
        }

        .app-theme-dark .dropdown-menu.order-status {
            border: 1px solid #343a40;
            box-shadow: 0 0 10px #343a40;
        }

        .app-theme-dark .dropdown-menu.order-status .dropdown-item {
            border-bottom: 1px solid #343a40;
        }

        .max-300 {
            max-width: 340px;
        }

        .min-w-200 {
            min-width: 200px;
            display: inline;
        }

        .item-divider {
            height: 80px;
            width: 1px;
            background: #e5e5e5;
            margin: 0 20px;
        }

        .app-theme-dark .item-divider {
            background: #343a40;
        }

        .order-item {
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .order-item:last-child {
            margin-bottom: 0;
        }

        .order-item .label {
            color: #687387;
            line-height: 22px;
        }

        .app-theme-dark .order-item .label {
            color: #8f96a6;
        }

        .order-item .value {
            line-height: 22px;
            font-weight: 500;
            color: #000;
        }

        .app-theme-dark .order-item .value {
            color: #fff;
        }

        @media (max-width: 991.98px) {
            .admin-return-order-show .card-header {
                align-items: flex-start !important;
            }

            .admin-return-order-show .return-order-products-table {
                min-width: 680px;
            }

            .admin-return-order-show .info-row,
            .admin-return-order-show .return-address-row {
                align-items: flex-start !important;
            }
        }

        @media (max-width: 768px) {
            .item-divider {
                display: none;
            }

            .admin-return-order-show .card-header {
                padding: 1rem !important;
            }

            .admin-return-order-show .card-body {
                padding: 1rem;
            }

            .admin-return-order-show .return-order-summary-grid {
                gap: 1rem !important;
            }

            .admin-return-order-show .order-item {
                flex-direction: column;
                align-items: flex-start;
            }

            .admin-return-order-show .order-item .value {
                width: 100%;
                overflow-wrap: anywhere;
            }

            .admin-return-order-show .return-order-products-table {
                min-width: 620px;
            }

            .admin-return-order-show .customer-info-row,
            .admin-return-order-show .return-reason-row,
            .admin-return-order-show .info-row,
            .admin-return-order-show .return-address-row {
                flex-direction: column;
                align-items: flex-start !important;
                gap: 6px !important;
            }

            .admin-return-order-show .info-row-control {
                width: 100%;
                justify-content: space-between;
            }

            .admin-return-order-show .info-row-control .btn,
            .admin-return-order-show .info-row-control .dropdown-toggle {
                max-width: 100%;
            }

            .admin-return-order-show .modal-dialog {
                margin: 1rem;
            }
        }

        @media (max-width: 575.98px) {
            .admin-return-order-show .row.my-3 {
                margin-top: 0.75rem !important;
                margin-bottom: 0.75rem !important;
            }

            .admin-return-order-show .card-title {
                font-size: 1.1rem;
            }

            .admin-return-order-show .return-order-products-table {
                min-width: 560px;
            }

            .admin-return-order-show .max-300 {
                max-width: 100%;
            }

            .admin-return-order-show .dropdown-menu.order-status {
                min-width: 180px;
            }
        }
    </style>
@endpush
