@extends('backend.layout')

@section('backend_content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="mb-4">
                    <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-secondary btn-sm">
                        <i class="bi bi-arrow-left"></i> Back to Orders
                    </a>
                </div>

                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <div class="row g-4">
                    {{-- Order Info --}}
                    <div class="col-lg-8">
                        {{-- Order Header --}}
                        <div class="card border-0 shadow-sm mb-4">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-4">
                                    <div>
                                        <h4 class="mb-1 fw-700">{{ $order->order_number }}</h4>
                                        <small class="text-muted">{{ $order->created_at->format('M d, Y H:i A') }}</small>
                                    </div>
                                    <div class="text-end">
                                        @if ($order->status === 'pending')
                                            <span class="badge bg-warning text-dark fs-6 px-3 py-2">Pending</span>
                                        @elseif ($order->status === 'processing')
                                            <span class="badge bg-info fs-6 px-3 py-2">Processing (Handed to
                                                Delivery)</span>
                                        @elseif ($order->status === 'completed')
                                            <span class="badge bg-success fs-6 px-3 py-2">Completed</span>
                                        @elseif ($order->status === 'cancelled')
                                            <span class="badge bg-danger fs-6 px-3 py-2">Cancelled</span>
                                        @else
                                            <span
                                                class="badge bg-secondary fs-6 px-3 py-2">{{ ucfirst($order->status) }}</span>
                                        @endif
                                    </div>
                                </div>

                                <hr>

                                <div class="row g-4">
                                    <div class="col-md-6">
                                        <h6 class="fw-600 mb-3">Customer Information</h6>
                                        <div class="mb-3">
                                            <small class="text-muted">Name</small>
                                            <p class="mb-0 fw-600">{{ $order->customer_name }}</p>
                                        </div>
                                        <div class="mb-3">
                                            <small class="text-muted">Phone</small>
                                            <p class="mb-0 fw-600">{{ $order->phone }}</p>
                                        </div>
                                        <div class="mb-3">
                                            <small class="text-muted">Address</small>
                                            <p class="mb-0 fw-600">{{ $order->address }}</p>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <h6 class="fw-600 mb-3">Order Details</h6>
                                        <div class="mb-3">
                                            <small class="text-muted">Payment Method</small>
                                            <p class="mb-0 fw-600 text-uppercase">{{ $order->payment_method }}</p>
                                        </div>
                                        <div class="mb-3">
                                            <small class="text-muted">Status</small>
                                            <p class="mb-0 fw-600 text-capitalize">{{ $order->status }}</p>
                                        </div>
                                        @if ($order->notes)
                                            <div class="mb-3">
                                                <small class="text-muted">Notes</small>
                                                <p class="mb-0 fw-600">{{ $order->notes }}</p>
                                            </div>
                                        @endif
                                        @if ($order->status === 'cancelled' && $order->cancelled_remarks)
                                            <div class="mb-3">
                                                <small class="text-muted">Cancellation Remarks</small>
                                                <p class="mb-0 fw-600 text-danger">{{ $order->cancelled_remarks }}</p>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Order Items --}}
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-light border-bottom">
                                <h6 class="mb-0 fw-600">Order Items</h6>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-sm mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Product</th>
                                            <th>Shop</th>
                                            <th class="text-center">Qty</th>
                                            <th class="text-end">Price</th>
                                            <th class="text-end">Subtotal</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($order->items as $item)
                                            <tr>
                                                <td class="fw-600">
                                                    {{ $item->product_name }}
                                                    @if ($item->variant_label)
                                                        <div class="small text-muted fw-normal">Variant:
                                                            {{ $item->variant_label }}</div>
                                                    @endif
                                                </td>
                                                <td>{{ $item->shop_name }}</td>
                                                <td class="text-center">{{ $item->quantity }}</td>
                                                <td class="text-end">৳{{ number_format($item->price, 0) }}</td>
                                                <td class="text-end fw-600">৳{{ number_format($item->line_total, 0) }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="5" class="text-center py-3 text-muted">No items in this
                                                    order</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    {{-- Status Actions Sidebar --}}
                    <div class="col-lg-4">
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-light border-bottom">
                                <h6 class="mb-0 fw-600">Update Status</h6>
                            </div>
                            <div class="card-body">
                                <p class="text-muted small mb-3">Change order state for handling and delivery workflow.</p>

                                <form method="POST" action="{{ route('admin.orders.update-status', $order) }}"
                                    class="d-flex flex-column gap-2">
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="status">

                                    <button type="button" class="btn btn-outline-warning w-100 btn-status"
                                        data-status="pending" {{ $order->status === 'pending' ? 'disabled' : '' }}>
                                        <i class="bi bi-clock"></i> Mark as Pending
                                    </button>

                                    <button type="button" class="btn btn-outline-info w-100 btn-status"
                                        data-status="processing" {{ $order->status === 'processing' ? 'disabled' : '' }}>
                                        <i class="bi bi-truck"></i> Mark as Processing (Handed to Delivery)
                                    </button>

                                    <button type="button" class="btn btn-outline-success w-100 btn-status"
                                        data-status="completed" {{ $order->status === 'completed' ? 'disabled' : '' }}>
                                        <i class="bi bi-check-circle"></i> Mark as Completed
                                    </button>

                                    <button type="button" class="btn btn-outline-danger w-100 btn-status"
                                        data-status="cancelled" {{ $order->status === 'cancelled' ? 'disabled' : '' }}>
                                        <i class="bi bi-x-circle"></i> Mark as Cancelled
                                    </button>

                                    <div id="cancelledRemarksWrap" class="d-none">
                                        <label for="cancelled_remarks" class="form-label mb-1">Cancellation
                                            Remarks</label>
                                        <textarea id="cancelled_remarks" name="cancelled_remarks" class="form-control" rows="3"
                                            placeholder="Why was this order cancelled?">{{ old('cancelled_remarks', $order->cancelled_remarks) }}</textarea>
                                        <small class="text-muted">Required when status is cancelled.</small>
                                        <button type="button" id="confirmCancelledBtn"
                                            class="btn btn-danger w-100 mt-2">
                                            <i class="bi bi-check2-circle"></i> Confirm Cancelled
                                        </button>
                                    </div>
                                </form>

                                <hr>

                                <div class="alert alert-info small mb-0">
                                    <i class="bi bi-info-circle"></i>
                                    <strong>Order Total:</strong> ৳{{ number_format($order->total_amount, 0) }}
                                </div>
                            </div>
                        </div>

                        {{-- Recent Orders Summary --}}
                        <div class="card border-0 shadow-sm mt-3">
                            <div class="card-header bg-light border-bottom">
                                <h6 class="mb-0 fw-600">Customer Stats</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <small class="text-muted">Total Orders</small>
                                    <p class="mb-0 fw-600 fs-5">
                                        {{ $order->user ? $order->user->orders->count() : 'Guest' }}</p>
                                </div>
                                <div class="mb-3">
                                    <small class="text-muted">Total Spent</small>
                                    <p class="mb-0 fw-600 fs-5">
                                        @if ($order->user)
                                            ৳{{ number_format($order->user->orders->sum('total_amount'), 0) }}
                                        @else
                                            N/A (Guest)
                                        @endif
                                    </p>
                                </div>
                                <div>
                                    <small class="text-muted">Last Order</small>
                                    <p class="mb-0 fw-600">{{ $order->created_at->format('M d, Y') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const STATUS_CANCELLED = 'cancelled';

        document.querySelectorAll('.btn-status').forEach((btn) => {
            btn.addEventListener('click', function() {
                const form = this.closest('form');
                const statusInput = form.querySelector('input[name="status"]');
                const remarksWrap = form.querySelector('#cancelledRemarksWrap');
                const remarksInput = form.querySelector('textarea[name="cancelled_remarks"]');

                statusInput.value = this.dataset.status;

                if (this.dataset.status === STATUS_CANCELLED) {
                    remarksWrap.classList.remove('d-none');
                    remarksInput.setAttribute('required', 'required');
                    remarksInput.focus();
                    return;
                } else {
                    remarksWrap.classList.add('d-none');
                    remarksInput.removeAttribute('required');
                    remarksInput.value = '';
                }

                form.submit();
            });
        });

        const confirmCancelledBtn = document.getElementById('confirmCancelledBtn');
        if (confirmCancelledBtn) {
            confirmCancelledBtn.addEventListener('click', function() {
                const form = this.closest('form');
                const statusInput = form.querySelector('input[name="status"]');
                const remarksInput = form.querySelector('textarea[name="cancelled_remarks"]');

                statusInput.value = STATUS_CANCELLED;

                if (!remarksInput.value.trim()) {
                    remarksInput.focus();
                    return;
                }

                form.submit();
            });
        }

        window.addEventListener('DOMContentLoaded', function() {
            const wrap = document.getElementById('cancelledRemarksWrap');
            if (!wrap) {
                return;
            }

            @if ($errors->has('cancelled_remarks') || old('status') === 'cancelled' || $order->status === 'cancelled')
                wrap.classList.remove('d-none');
            @endif
        });
    </script>

    <style>
        .fw-600 {
            font-weight: 600;
        }

        .fw-700 {
            font-weight: 700;
        }

        .table tbody td {
            vertical-align: middle;
        }
    </style>
@endsection