@extends('layouts.admin-layout')
@section('title', 'All Orders ')
@section('content')

@section('content')
    <div class="container">
        <h1>Orders</h1>

        <!-- Success message after updating an order -->
        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Order ID</th>
                    <th>Customer Name</th>
                    <th>Order Status</th>
                    <th>Payment Amount</th>
                    <!-- <th>Actions</th> -->
                </tr>
            </thead>
            <tbody>
                @foreach($orders as $order)
                    <tr>
                        <td>{{ $order->id }}</td>
                        <td>{{ $order->first_name . ' ' . $order->last_name }}</td>
                        <td>
                            <select class="status-dropdown" data-order-id="{{ $order->id }}">
                                <option value="pending" {{ $order->payment_status == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="processed" {{ $order->payment_status == 'processed' ? 'selected' : '' }}>Processed</option>
                                <option value="completed" {{ $order->payment_status == 'completed' ? 'selected' : '' }}>Completed</option>
                                <option value="cancelled" {{ $order->payment_status == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                            </select>
                            <!-- {{ $order->payment_status }} -->
                         </td>

                        @if($order->payments->isNotEmpty())
                            <td>${{ number_format($order->payments->last()->amount, 2) }}</td> <!-- Last payment amount -->
                        @else
                            <td>$0.00</td>
                        @endif

                        <!-- <td>
                            <a href="{{ route('admin.orders.edit', $order->id) }}" class="btn btn-primary">Edit</a>
                        </td> -->
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function () {
        const route = "{{ route('admin.orders.update', ':order_id') }}";

        $('.status-dropdown').on('change', function () {
            var orderId = $(this).data('order-id');
            var newStatus = $(this).val();
            var requestUrl = route.replace(':order_id', orderId);

            $.ajax({
                url: requestUrl, 
                type: 'PUT',
                data: {
                    _token: '{{ csrf_token() }}',
                    payment_status: newStatus
                },
                success: function (response) {
                    toastr.success('Order status updated to ' + newStatus);
                    // alert('Order status updated to ' + newStatus);
                },
                error: function (xhr, status, error) {
                    toastr.error('Error updating the status');
                    // alert('Error updating the status');
                }
            });
        });
    });
</script>

@endsection