@extends('admin.layouts.app')

@section('title', __('Order') . ' #' . $order->order_number)

@section('breadcrumb')
    <li class="breadcrumb-item">
        <a href="{{ route('admin.orders.index') }}">{{ __('Orders') }}</a>
    </li>
    <li class="breadcrumb-item">
        <a href="{{ route('admin.orders.list') }}">{{ __('All Orders') }}</a>
    </li>
    <li class="breadcrumb-item active">{{ $order->order_number }}</li>
@endsection

@section('page-header')
    <div>
        <h1 class="h3 mb-0">{{ __('Order') }} #{{ $order->order_number }}</h1>
        <p class="text-muted mb-0">
            {{ __('Placed on') }} {{ $order->created_at->format('F j, Y \a\t g:i A') }}
            <span class="mx-2">•</span>
            {!! $order->status_badge !!}
        </p>
    </div>
    <div>
        <div class="btn-group me-2" role="group">
            <button type="button" class="btn btn-outline-primary" onclick="window.print()">
                <i class="fas fa-print me-2"></i>
                {{ __('Print') }}
            </button>
            <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#emailCustomerModal">
                <i class="fas fa-envelope me-2"></i>
                {{ __('Email Customer') }}
            </button>
        </div>

        <div class="btn-group" role="group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                <i class="fas fa-cog me-2"></i>
                {{ __('Actions') }}
            </button>
            <ul class="dropdown-menu">
                @if($order->status === 'pending')
                    <li>
                        <button class="dropdown-item update-status-btn" data-status="processing">
                            <i class="fas fa-play me-2"></i>
                            {{ __('Mark as Processing') }}
                        </button>
                    </li>
                @endif

                @if($order->canBeShipped())
                    <li>
                        <button class="dropdown-item update-status-btn" data-status="shipped">
                            <i class="fas fa-shipping-fast me-2"></i>
                            {{ __('Mark as Shipped') }}
                        </button>
                    </li>
                @endif

                @if($order->canBeDelivered())
                    <li>
                        <button class="dropdown-item update-status-btn" data-status="delivered">
                            <i class="fas fa-check-circle me-2"></i>
                            {{ __('Mark as Delivered') }}
                        </button>
                    </li>
                @endif

                @if($order->canBeCancelled())
                    <li><hr class="dropdown-divider"></li>
                    <li>
                        <button class="dropdown-item text-warning update-status-btn" data-status="cancelled">
                            <i class="fas fa-times-circle me-2"></i>
                            {{ __('Cancel Order') }}
                        </button>
                    </li>
                @endif

                @if($order->status === 'delivered')
                    <li><hr class="dropdown-divider"></li>
                    <li>
                        <button class="dropdown-item text-info update-status-btn" data-status="refunded">
                            <i class="fas fa-undo me-2"></i>
                            {{ __('Process Refund') }}
                        </button>
                    </li>
                @endif
            </ul>
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        <!-- Left Column: Order Details -->
        <div class="col-lg-8">
            <!-- Order Items -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">{{ __('Order Items') }} ({{ $order->items->count() }})</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-borderless mb-0">
                            <thead class="bg-light">
                            <tr>
                                <th style="width: 80px;"></th>
                                <th>{{ __('Product') }}</th>
                                <th class="text-center">{{ __('Quantity') }}</th>
                                <th class="text-end">{{ __('Unit Price') }}</th>
                                <th class="text-end">{{ __('Total') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($order->items as $item)
                                <tr>
                                    <td>
                                        @if($item->product_image)
                                            <img src="{{ asset('storage/' . $item->product_image) }}"
                                                 alt="{{ $item->product_name }}"
                                                 class="rounded"
                                                 style="width: 60px; height: 60px; object-fit: cover;">
                                        @else
                                            <div class="bg-light rounded d-flex align-items-center justify-content-center"
                                                 style="width: 60px; height: 60px;">
                                                <i class="fas fa-image text-muted"></i>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <div>
                                            <h6 class="mb-1">{{ $item->product_name }}</h6>
                                            @if($item->product_sku)
                                                <small class="text-muted">{{ __('SKU') }}: {{ $item->product_sku }}</small>
                                            @endif
                                            @if($item->product && $item->product->id)
                                                <br>
                                                <a href="{{ route('admin.products.show', $item->product) }}"
                                                   class="small text-primary">
                                                    <i class="fas fa-external-link-alt me-1"></i>
                                                    {{ __('View Product') }}
                                                </a>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-light text-dark fs-6">{{ $item->quantity }}</span>
                                    </td>
                                    <td class="text-end">
                                        <div class="fw-medium">{{ $item->formatted_unit_price }}</div>
                                    </td>
                                    <td class="text-end">
                                        <div class="fw-bold">{{ $item->formatted_total_price }}</div>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Customer Information -->
            <div class="row">
                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="card-header">
                            <h6 class="mb-0">{{ __('Customer Information') }}</h6>
                        </div>
                        <div class="card-body">
                            <div class="info-item mb-3">
                                <label class="form-label fw-bold">{{ __('Name') }}</label>
                                <p class="mb-0">{{ $order->customer_name }}</p>
                            </div>

                            <div class="info-item mb-3">
                                <label class="form-label fw-bold">{{ __('Email') }}</label>
                                <p class="mb-0">
                                    <a href="mailto:{{ $order->customer_email }}" class="text-decoration-none">
                                        {{ $order->customer_email }}
                                    </a>
                                </p>
                            </div>

                            <div class="info-item mb-3">
                                <label class="form-label fw-bold">{{ __('Phone') }}</label>
                                <p class="mb-0">
                                    <a href="tel:{{ $order->customer_phone }}" class="text-decoration-none">
                                        {{ $order->customer_phone }}
                                    </a>
                                </p>
                            </div>

                            @if($order->user)
                                <div class="info-item">
                                    <label class="form-label fw-bold">{{ __('Customer Account') }}</label>
                                    <p class="mb-0">
                                        <a href="#" class="text-primary">
                                            {{ __('View Profile') }}
                                        </a>
                                        <span class="mx-2">•</span>
                                        <small class="text-muted">{{ __('Joined') }} {{ $order->user->created_at->format('M Y') }}</small>
                                    </p>
                                </div>
                            @else
                                <div class="info-item">
                                    <small class="text-muted">{{ __('Guest Customer') }}</small>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="card-header">
                            <h6 class="mb-0">{{ __('Shipping Address') }}</h6>
                        </div>
                        <div class="card-body">
                            <address class="mb-0">
                                <strong>{{ $order->shipping_first_name }} {{ $order->shipping_last_name }}</strong><br>
                                @if($order->shipping_company)
                                    {{ $order->shipping_company }}<br>
                                @endif
                                {{ $order->shipping_address_line_1 }}<br>
                                @if($order->shipping_address_line_2)
                                    {{ $order->shipping_address_line_2 }}<br>
                                @endif
                                {{ $order->shipping_city }}, {{ $order->shipping_state }}<br>
                                {{ $order->shipping_postal_code }}<br>
                                {{ $order->shipping_country }}
                            </address>

                            @if($order->billing_address !== $order->shipping_address)
                                <hr>
                                <h6 class="fw-bold">{{ __('Billing Address') }}</h6>
                                <address class="mb-0">
                                    <strong>{{ $order->billing_first_name }} {{ $order->billing_last_name }}</strong><br>
                                    @if($order->billing_company)
                                        {{ $order->billing_company }}<br>
                                    @endif
                                    {{ $order->billing_address_line_1 }}<br>
                                    @if($order->billing_address_line_2)
                                        {{ $order->billing_address_line_2 }}<br>
                                    @endif
                                    {{ $order->billing_city }}, {{ $order->billing_state }}<br>
                                    {{ $order->billing_postal_code }}<br>
                                    {{ $order->billing_country }}
                                </address>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Order Details -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">{{ __('Order Details') }}</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-6 mb-3">
                            <label class="form-label fw-bold">{{ __('Order Date') }}</label>
                            <p class="mb-0">{{ $order->created_at->format('F j, Y \a\t g:i A') }}</p>
                        </div>

                        <div class="col-sm-6 mb-3">
                            <label class="form-label fw-bold">{{ __('Order Status') }}</label>
                            <p class="mb-0">{!! $order->status_badge !!}</p>
                        </div>

                        <div class="col-sm-6 mb-3">
                            <label class="form-label fw-bold">{{ __('Shipping Method') }}</label>
                            <p class="mb-0">
                                @switch($order->shipping_method)
                                    @case('standard')
                                        {{ __('Standard Shipping (3-5 business days)') }}
                                        @break
                                    @case('express')
                                        {{ __('Express Shipping (1-2 business days)') }}
                                        @break
                                    @case('same_day')
                                        {{ __('Same Day Delivery') }}
                                        @break
                                    @default
                                        {{ $order->shipping_method }}
                                @endswitch
                            </p>
                        </div>

                        <div class="col-sm-6 mb-3">
                            <label class="form-label fw-bold">{{ __('Payment Method') }}</label>
                            <p class="mb-0">
                                @switch($order->payment_method)
                                    @case('cod')
                                        {{ __('Cash on Delivery') }}
                                        @break
                                    @case('card')
                                        {{ __('Credit/Debit Card') }}
                                        @break
                                    @case('bank_transfer')
                                        {{ __('Bank Transfer') }}
                                        @break
                                    @default
                                        {{ $order->payment_method }}
                                @endswitch
                            </p>
                        </div>

                        @if($order->tracking_number)
                            <div class="col-sm-6 mb-3">
                                <label class="form-label fw-bold">{{ __('Tracking Number') }}</label>
                                <p class="mb-0">
                                    <code>{{ $order->tracking_number }}</code>
                                    <button type="button" class="btn btn-sm btn-outline-secondary ms-2"
                                            onclick="copyToClipboard('{{ $order->tracking_number }}')">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </p>
                            </div>
                        @endif

                        <div class="col-sm-6 mb-3">
                            <label class="form-label fw-bold">{{ __('Payment Status') }}</label>
                            <p class="mb-0">
                                @switch($order->payment_status)
                                    @case('paid')
                                        <span class="badge bg-success">{{ __('Paid') }}</span>
                                        @break
                                    @case('pending')
                                        <span class="badge bg-warning">{{ __('Pending') }}</span>
                                        @break
                                    @case('failed')
                                        <span class="badge bg-danger">{{ __('Failed') }}</span>
                                        @break
                                    @case('refunded')
                                        <span class="badge bg-info">{{ __('Refunded') }}</span>
                                        @break
                                    @default
                                        <span class="badge bg-secondary">{{ ucfirst($order->payment_status) }}</span>
                                @endswitch
                            </p>
                        </div>
                    </div>

                    @if($order->notes)
                        <div class="mt-3">
                            <label class="form-label fw-bold">{{ __('Order Notes') }}</label>
                            <div class="bg-light p-3 rounded">
                                {{ $order->notes }}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Right Column: Sidebar -->
        <div class="col-lg-4">
            <!-- Order Summary -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">{{ __('Order Summary') }}</h6>
                </div>
                <div class="card-body">
                    <div class="summary-row d-flex justify-content-between mb-2">
                        <span>{{ __('Subtotal') }}:</span>
                        <span>{{ number_format($order->subtotal, 2) }} {{ __('SAR') }}</span>
                    </div>

                    <div class="summary-row d-flex justify-content-between mb-2">
                        <span>{{ __('Shipping') }}:</span>
                        <span>{{ number_format($order->shipping_amount, 2) }} {{ __('SAR') }}</span>
                    </div>

                    <div class="summary-row d-flex justify-content-between mb-2">
                        <span>{{ __('Tax (15%)') }}:</span>
                        <span>{{ number_format($order->tax_amount, 2) }} {{ __('SAR') }}</span>
                    </div>

                    @if($order->discount_amount > 0)
                        <div class="summary-row d-flex justify-content-between mb-2 text-success">
                            <span>{{ __('Discount') }}:</span>
                            <span>-{{ number_format($order->discount_amount, 2) }} {{ __('SAR') }}</span>
                        </div>
                    @endif

                    <hr>

                    <div class="summary-row d-flex justify-content-between mb-0">
                        <strong>{{ __('Total') }}:</strong>
                        <strong class="text-primary fs-5">{{ $order->formatted_total }}</strong>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">{{ __('Quick Actions') }}</h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        @if($order->status === 'pending')
                            <button type="button" class="btn btn-outline-success update-status-btn" data-status="processing">
                                <i class="fas fa-play me-2"></i>
                                {{ __('Start Processing') }}
                            </button>
                        @endif

                        @if($order->canBeShipped())
                            <button type="button" class="btn btn-outline-primary update-status-btn" data-status="shipped">
                                <i class="fas fa-shipping-fast me-2"></i>
                                {{ __('Mark as Shipped') }}
                            </button>
                        @endif

                        @if($order->canBeDelivered())
                            <button type="button" class="btn btn-outline-success update-status-btn" data-status="delivered">
                                <i class="fas fa-check-circle me-2"></i>
                                {{ __('Mark as Delivered') }}
                            </button>
                        @endif

                        <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#addNoteModal">
                            <i class="fas fa-sticky-note me-2"></i>
                            {{ __('Add Note') }}
                        </button>
                    </div>
                </div>
            </div>

            <!-- Order Timeline -->
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">{{ __('Order Timeline') }}</h6>
                </div>
                <div class="card-body">
                    <div class="timeline">
                        @foreach($timeline as $event)
                            <div class="timeline-item">
                                <div class="timeline-marker bg-{{ $event['color'] }}">
                                    <i class="{{ $event['icon'] }} text-white"></i>
                                </div>
                                <div class="timeline-content">
                                    <h6 class="timeline-title">{{ $event['event'] }}</h6>
                                    <p class="timeline-description">{{ $event['description'] }}</p>
                                    <small class="timeline-time text-muted">
                                        {{ $event['timestamp']->format('M j, Y \a\t g:i A') }}
                                    </small>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Note Modal -->
    <div class="modal fade" id="addNoteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Add Note to Order') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="addNoteForm">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="note" class="form-label">{{ __('Note') }}</label>
                            <textarea class="form-control" id="note" name="notes" rows="4"
                                      placeholder="{{ __('Add internal note about this order...') }}" required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Add Note') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Email Customer Modal -->
    <div class="modal fade" id="emailCustomerModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Email Customer') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="emailCustomerForm">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="email_subject" class="form-label">{{ __('Subject') }}</label>
                            <input type="text" class="form-control" id="email_subject" name="subject"
                                   value="Update on your order #{{ $order->order_number }}" required>
                        </div>
                        <div class="mb-3">
                            <label for="email_message" class="form-label">{{ __('Message') }}</label>
                            <textarea class="form-control" id="email_message" name="message" rows="6"
                                      placeholder="{{ __('Enter your message to the customer...') }}" required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-envelope me-2"></i>
                            {{ __('Send Email') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .info-item {
            margin-bottom: 1rem;
        }

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

        .summary-row {
            padding: 0.25rem 0;
        }

        .timeline {
            position: relative;
            padding-left: 2rem;
        }

        .timeline-item {
            position: relative;
            padding-bottom: 2rem;
        }

        .timeline-item:last-child {
            padding-bottom: 0;
        }

        .timeline-item:not(:last-child)::before {
            content: '';
            position: absolute;
            left: -1.75rem;
            top: 2rem;
            width: 2px;
            height: calc(100% - 1rem);
            background: #e9ecef;
        }

        .timeline-marker {
            position: absolute;
            left: -2rem;
            top: 0;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .timeline-content {
            padding-left: 0.5rem;
        }

        .timeline-title {
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .timeline-description {
            font-size: 0.85rem;
            color: #6c757d;
            margin-bottom: 0.25rem;
        }

        .timeline-time {
            font-size: 0.75rem;
        }

        /* Print styles */
        @media print {
            .btn, .modal, .dropdown-menu {
                display: none !important;
            }

            .card {
                border: 1px solid #dee2e6 !important;
                box-shadow: none !important;
                margin-bottom: 1rem !important;
            }

            .timeline-marker {
                box-shadow: none !important;
            }
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .timeline {
                padding-left: 1.5rem;
            }

            .timeline-marker {
                left: -1.5rem;
                width: 28px;
                height: 28px;
            }

            .timeline-item:not(:last-child)::before {
                left: -1.25rem;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            // Handle status updates
            $('.update-status-btn').on('click', function() {
                const status = $(this).data('status');
                updateOrderStatus(status);
            });

            // Handle add note form
            $('#addNoteForm').on('submit', function(e) {
                e.preventDefault();

                const notes = $('#note').val();
                if (!notes.trim()) return;

                updateOrderStatus(null, null, notes);
                $('#addNoteModal').modal('hide');
                $('#addNoteForm')[0].reset();
            });

            // Handle email customer form
            $('#emailCustomerForm').on('submit', function(e) {
                e.preventDefault();

                const subject = $('#email_subject').val();
                const message = $('#email_message').val();

                // Here you would send the email
                alert('{{ __("Email functionality will be implemented with proper email templates") }}');
                $('#emailCustomerModal').modal('hide');
            });
        });

        // Update order status function
        function updateOrderStatus(status = null, trackingNumber = null, notes = null) {
            if (status) {
                let confirmMessage = '{{ __("Are you sure you want to update this order status?") }}';
                if (status === 'cancelled') {
                    confirmMessage = '{{ __("Are you sure you want to cancel this order? This will restore stock levels.") }}';
                } else if (status === 'refunded') {
                    confirmMessage = '{{ __("Are you sure you want to process a refund? This will restore stock levels and mark payment as refunded.") }}';
                }

                if (!confirm(confirmMessage)) {
                    return;
                }

                if (status === 'shipped' && !trackingNumber) {
                    trackingNumber = prompt('{{ __("Enter tracking number (optional):") }}') || '';
                }
            }

            const data = {
                _token: '{{ csrf_token() }}'
            };

            if (status) data.status = status;
            if (trackingNumber) data.tracking_number = trackingNumber;
            if (notes) data.notes = notes;

            $.ajax({
                url: '{{ route("admin.orders.update-status", $order) }}',
                method: 'PUT',
                data: data,
                success: function(response) {
                    if (response.success) {
                        showNotification(response.message, 'success');
                        setTimeout(() => location.reload(), 1500);
                    } else {
                        showNotification(response.message, 'error');
                    }
                },
                error: function(xhr) {
                    const response = xhr.responseJSON;
                    showNotification(response?.message || '{{ __("An error occurred. Please try again.") }}', 'error');
                }
            });
        }

        // Copy to clipboard function
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(function() {
                showNotification('{{ __("Copied to clipboard") }}', 'success');
            });
        }

        // Show notification function
        function showNotification(message, type) {
            const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
            const alertHtml = `
        <div class="alert ${alertClass} alert-dismissible fade show position-fixed"
             style="top: 20px; right: 20px; z-index: 9999; min-width: 300px;" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
            $('body').append(alertHtml);

            // Auto remove after 5 seconds
            setTimeout(() => {
                $('.alert').fadeOut();
            }, 5000);
        }
    </script>
@endpush