@extends('admin.layouts.app')

@section('title', __('All Orders'))

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

@section('page-header')
    <div>
        <h1 class="h3 mb-0">{{ __('All Orders') }}</h1>
        <p class="text-muted mb-0">{{ __('Manage and track all customer orders') }}</p>
    </div>
    <div>
        <button type="button" class="btn btn-outline-secondary me-2" id="bulkActionsBtn" disabled>
            <i class="fas fa-tasks me-2"></i>
            {{ __('Bulk Actions') }}
        </button>
        <a href="{{ route('admin.orders.export', request()->query()) }}" class="btn btn-outline-primary">
            <i class="fas fa-download me-2"></i>
            {{ __('Export') }}
        </a>
    </div>
@endsection

@section('content')
    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('admin.orders.list') }}" id="filtersForm">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label for="search" class="form-label">{{ __('Search') }}</label>
                        <input type="text" class="form-control" id="search" name="search"
                               value="{{ request('search') }}"
                               placeholder="{{ __('Order #, customer name, email...') }}">
                    </div>

                    <div class="col-md-2 mb-3">
                        <label for="status" class="form-label">{{ __('Status') }}</label>
                        <select class="form-control" id="status" name="status">
                            <option value="">{{ __('All Statuses') }}</option>
                            @foreach($statusOptions as $value => $label)
                                <option value="{{ $value }}" {{ request('status') === $value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-2 mb-3">
                        <label for="payment_status" class="form-label">{{ __('Payment') }}</label>
                        <select class="form-control" id="payment_status" name="payment_status">
                            <option value="">{{ __('All Payments') }}</option>
                            @foreach($paymentStatusOptions as $value => $label)
                                <option value="{{ $value }}" {{ request('payment_status') === $value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-2 mb-3">
                        <label for="date_from" class="form-label">{{ __('Date From') }}</label>
                        <input type="date" class="form-control" id="date_from" name="date_from"
                               value="{{ request('date_from') }}">
                    </div>

                    <div class="col-md-2 mb-3">
                        <label for="date_to" class="form-label">{{ __('Date To') }}</label>
                        <input type="date" class="form-control" id="date_to" name="date_to"
                               value="{{ request('date_to') }}">
                    </div>

                    <div class="col-md-1 mb-3 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>

                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <select class="form-select form-select-sm" name="sort" onchange="this.form.submit()">
                            <option value="newest" {{ request('sort') === 'newest' ? 'selected' : '' }}>
                                {{ __('Newest First') }}
                            </option>
                            <option value="oldest" {{ request('sort') === 'oldest' ? 'selected' : '' }}>
                                {{ __('Oldest First') }}
                            </option>
                            <option value="amount_high" {{ request('sort') === 'amount_high' ? 'selected' : '' }}>
                                {{ __('Highest Amount') }}
                            </option>
                            <option value="amount_low" {{ request('sort') === 'amount_low' ? 'selected' : '' }}>
                                {{ __('Lowest Amount') }}
                            </option>
                        </select>
                    </div>

                    @if(request()->hasAny(['search', 'status', 'payment_status', 'date_from', 'date_to']))
                        <a href="{{ route('admin.orders.list') }}" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-times me-1"></i>
                            {{ __('Clear Filters') }}
                        </a>
                    @endif
                </div>
            </form>
        </div>
    </div>

    <!-- Bulk Actions Modal -->
    <div class="modal fade" id="bulkActionsModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Bulk Actions') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>{{ __('Select an action to perform on the selected orders:') }}</p>
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-outline-info" onclick="performBulkAction('mark_processing')">
                            <i class="fas fa-play me-2"></i>
                            {{ __('Mark as Processing') }}
                        </button>
                        <button type="button" class="btn btn-outline-primary" onclick="performBulkAction('mark_shipped')">
                            <i class="fas fa-shipping-fast me-2"></i>
                            {{ __('Mark as Shipped') }}
                        </button>
                        <button type="button" class="btn btn-outline-success" onclick="performBulkAction('mark_delivered')">
                            <i class="fas fa-check-circle me-2"></i>
                            {{ __('Mark as Delivered') }}
                        </button>
                        <button type="button" class="btn btn-outline-warning" onclick="performBulkAction('cancel')">
                            <i class="fas fa-times-circle me-2"></i>
                            {{ __('Cancel Orders') }}
                        </button>
                        <button type="button" class="btn btn-outline-danger" onclick="performBulkAction('delete')">
                            <i class="fas fa-trash me-2"></i>
                            {{ __('Delete Orders') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Orders Table -->
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="bg-light">
                    <tr>
                        <th style="width: 40px;">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="selectAll">
                            </div>
                        </th>
                        <th>{{ __('Order #') }}</th>
                        <th>{{ __('Customer') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th>{{ __('Payment') }}</th>
                        <th>{{ __('Total') }}</th>
                        <th>{{ __('Items') }}</th>
                        <th>{{ __('Date') }}</th>
                        <th>{{ __('Actions') }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($orders as $order)
                        <tr class="order-row" data-order-id="{{ $order->id }}">
                            <td>
                                <div class="form-check">
                                    <input class="form-check-input order-checkbox" type="checkbox"
                                           value="{{ $order->id }}">
                                </div>
                            </td>
                            <td>
                                <a href="{{ route('admin.orders.show', $order) }}"
                                   class="fw-bold text-decoration-none">
                                    {{ $order->order_number }}
                                </a>
                                @if($order->tracking_number)
                                    <br>
                                    <small class="text-muted">
                                        <i class="fas fa-truck"></i> {{ $order->tracking_number }}
                                    </small>
                                @endif
                            </td>
                            <td>
                                <div>
                                    <div class="fw-medium">{{ $order->customer_name }}</div>
                                    <small class="text-muted">{{ $order->customer_email }}</small>
                                    <br>
                                    <small class="text-muted">
                                        <i class="fas fa-phone"></i> {{ $order->customer_phone }}
                                    </small>
                                </div>
                            </td>
                            <td>
                                <div class="status-wrapper" data-order-id="{{ $order->id }}">
                                    {!! $order->status_badge !!}
                                </div>
                            </td>
                            <td>
                                @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
                                <br>
                                <small class="text-muted">{{ ucfirst($order->payment_method) }}</small>
                            </td>
                            <td>
                                <strong>{{ $order->formatted_total }}</strong>
                                @if($order->discount_amount > 0)
                                    <br>
                                    <small class="text-success">
                                        -{{ number_format($order->discount_amount, 2) }} {{ __('SAR') }}
                                    </small>
                                @endif
                            </td>
                            <td>
                                <span class="badge bg-light text-dark">
                                    {{ $order->items->count() }}
                                </span>
                            </td>
                            <td>
                                <div>{{ $order->created_at->format('M j, Y') }}</div>
                                <small class="text-muted">{{ $order->created_at->format('g:i A') }}</small>
                                <br>
                                <small class="text-muted">{{ $order->created_at->diffForHumans() }}</small>
                            </td>
                            <td>
                                <div class="btn-group" role="group">
                                    <a href="{{ route('admin.orders.show', $order) }}"
                                       class="btn btn-sm btn-outline-primary"
                                       title="{{ __('View Details') }}">
                                        <i class="fas fa-eye"></i>
                                    </a>

                                    <div class="btn-group" role="group">
                                        <button type="button"
                                                class="btn btn-sm btn-outline-secondary dropdown-toggle"
                                                data-bs-toggle="dropdown">
                                            <i class="fas fa-cog"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            @if($order->status === 'pending')
                                                <li>
                                                    <button class="dropdown-item update-status-btn"
                                                            data-order-id="{{ $order->id }}"
                                                            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-order-id="{{ $order->id }}"
                                                            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-order-id="{{ $order->id }}"
                                                            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-order-id="{{ $order->id }}"
                                                            data-status="cancelled">
                                                        <i class="fas fa-times-circle me-2"></i>
                                                        {{ __('Cancel Order') }}
                                                    </button>
                                                </li>
                                            @endif
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center py-5">
                                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">{{ __('No orders found') }}</h5>
                                <p class="text-muted mb-0">
                                    @if(request()->hasAny(['search', 'status', 'payment_status', 'date_from', 'date_to']))
                                        {{ __('Try adjusting your filters to see more results.') }}
                                    @else
                                        {{ __('Orders will appear here once customers start placing them.') }}
                                    @endif
                                </p>
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        @if($orders->hasPages())
            <div class="card-footer">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="text-muted">
                        {{ __('Showing :from to :to of :total orders', [
                            'from' => $orders->firstItem(),
                            'to' => $orders->lastItem(),
                            'total' => $orders->total()
                        ]) }}
                    </div>
                    {{ $orders->links() }}
                </div>
            </div>
        @endif
    </div>
@endsection

@push('styles')
    <style>
        .order-row:hover {
            background-color: #f8f9fa;
        }

        .status-wrapper .badge {
            cursor: pointer;
        }

        .table th {
            font-weight: 600;
            color: #4a5568;
            border-bottom: 2px solid #e2e8f0;
        }

        .table td {
            vertical-align: middle;
        }

        .btn-group .dropdown-menu {
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            border: 1px solid #e2e8f0;
        }

        .dropdown-item {
            font-size: 0.875rem;
            padding: 0.5rem 1rem;
        }

        .dropdown-item:hover {
            background-color: #f8f9fa;
        }

        .form-check-input:checked {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .table-responsive {
                font-size: 0.875rem;
            }

            .btn-group .btn {
                padding: 0.25rem 0.5rem;
            }

            .badge {
                font-size: 0.7rem;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            // Handle select all checkbox
            $('#selectAll').on('change', function() {
                $('.order-checkbox').prop('checked', $(this).is(':checked'));
                toggleBulkActions();
            });

            // Handle individual checkboxes
            $('.order-checkbox').on('change', function() {
                const allChecked = $('.order-checkbox:checked').length === $('.order-checkbox').length;
                const anyChecked = $('.order-checkbox:checked').length > 0;

                $('#selectAll').prop('checked', allChecked);
                toggleBulkActions();
            });

            // Toggle bulk actions button
            function toggleBulkActions() {
                const checkedCount = $('.order-checkbox:checked').length;
                $('#bulkActionsBtn').prop('disabled', checkedCount === 0);

                if (checkedCount > 0) {
                    $('#bulkActionsBtn').text(`{{ __('Bulk Actions') }} (${checkedCount})`);
                } else {
                    $('#bulkActionsBtn').text('{{ __('Bulk Actions') }}');
                }
            }

            // Show bulk actions modal
            $('#bulkActionsBtn').on('click', function() {
                $('#bulkActionsModal').modal('show');
            });

            // Handle individual status updates
            $('.update-status-btn').on('click', function() {
                const orderId = $(this).data('order-id');
                const status = $(this).data('status');
                const button = $(this);

                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.") }}';
                }

                if (confirm(confirmMessage)) {
                    updateOrderStatus(orderId, status, button);
                }
            });

            // Update order status function
            function updateOrderStatus(orderId, status, button) {
                button.prop('disabled', true);

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

                $.ajax({
                    url: `/admin/orders/${orderId}/status`,
                    method: 'PUT',
                    data: {
                        status: status,
                        tracking_number: trackingNumber,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            // Update status badge in the table
                            $(`.status-wrapper[data-order-id="${orderId}"]`).html(response.status_badge);

                            // Show success message
                            showNotification(response.message, 'success');

                            // Reload page to refresh data
                            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');
                    },
                    complete: function() {
                        button.prop('disabled', false);
                    }
                });
            }

            // Show notification
            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);
            }
        });

        // Bulk actions function
        function performBulkAction(action) {
            const selectedOrders = $('.order-checkbox:checked').map(function() {
                return $(this).val();
            }).get();

            if (selectedOrders.length === 0) {
                alert('{{ __("Please select at least one order.") }}');
                return;
            }

            let confirmMessage = `{{ __("Are you sure you want to perform this action on :count orders?", ["count" => ""]) }}${selectedOrders.length}`;
            if (action === 'cancel') {
                confirmMessage = `{{ __("Are you sure you want to cancel :count orders? This will restore stock levels.", ["count" => ""]) }}${selectedOrders.length}`;
            } else if (action === 'delete') {
                confirmMessage = `{{ __("Are you sure you want to delete :count orders? This action cannot be undone.", ["count" => ""]) }}${selectedOrders.length}`;
            }

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

            // Close modal
            $('#bulkActionsModal').modal('hide');

            // Show loading
            const loadingHtml = `
        <div class="alert alert-info position-fixed"
             style="top: 20px; right: 20px; z-index: 9999; min-width: 300px;" id="bulkLoading">
            <i class="fas fa-spinner fa-spin me-2"></i>
            {{ __("Processing bulk action...") }}
            </div>
`;
            $('body').append(loadingHtml);

            $.ajax({
                url: '{{ route("admin.orders.bulk-action") }}',
                method: 'POST',
                data: {
                    action: action,
                    order_ids: selectedOrders,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $('#bulkLoading').remove();

                    if (response.success) {
                        showNotification(response.message, 'success');
                        setTimeout(() => location.reload(), 2000);
                    } else {
                        showNotification(response.message, 'error');
                    }
                },
                error: function() {
                    $('#bulkLoading').remove();
                    showNotification('{{ __("An error occurred. Please try again.") }}', 'error');
                }
            });
        }
    </script>
@endpush