@extends('back_office.layouts.app')

@section('content')
    <div class="container-fluid">
        <div class="card">
            <div class="card-header bg-white">
                <h5 class="mb-0">Edit Sofa Wash Order #{{ $order->id }}</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('sofa-wash-orders.update', $order->id) }}" method="POST">
                    @csrf

                    <!-- Order Summary Section -->
                    <div class="mb-4">
                        <h6 class="text-muted border-bottom pb-2 mb-3">Order Summary</h6>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-bold">Order ID</label>
                                <input type="text" value="{{ $order->id }}" class="form-control bg-light" disabled />
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-bold">Service Provider</label>
                                <input type="text" value="{{ $order->serviceProvider->title }}"
                                    class="form-control bg-light" disabled />
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-bold">Customer</label>
                                <input type="text" value="{{ $order->customer->name }}" class="form-control bg-light"
                                    disabled />
                            </div>
                        </div>
                    </div>

                    <!-- Order Items Section -->
                    @if ($order->orderItems && $order->orderItems->count() > 0)
                        <div class="mb-4">
                            <h6 class="text-muted border-bottom pb-2 mb-3">Sofa Details</h6>
                            <div class="table-responsive">
                                <table class="table table-sm table-bordered">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Service Type</th>
                                            <th>Quantity</th>
                                            <th>Unit Price</th>
                                            <th>Subtotal</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($order->orderItems as $item)
                                            <tr>
                                                <td>{{ $item->sofaServiceType->type_name ?? 'N/A' }}</td>
                                                <td>{{ $item->quantity }}</td>
                                                <td>{{ number_format($item->unit_price, 2) }}</td>
                                                <td>{{ number_format($item->subtotal, 2) }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @endif

                    <!-- Customer Details Section -->
                    <div class="mb-4">
                        <h6 class="text-muted border-bottom pb-2 mb-3">Other Details</h6>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label fw-bold">Special Instructions</label>
                                <textarea class="form-control bg-light" rows="3" disabled>{{ $order->special_instructions }}</textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Price Details Section -->
                    <div class="mb-4">
                        <h6 class="text-muted border-bottom pb-2 mb-3">Price Details</h6>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-bold">Total Price</label>
                                <input type="text" value="{{ number_format($order->total_price, 2) }}"
                                    class="form-control bg-light" disabled />
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-bold">Payment Method</label>
                                <input type="text" value="{{ ucfirst($order->payment_method) }}"
                                    class="form-control bg-light" disabled />
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-bold">Payment Status</label>
                                <input type="text" value="{{ ucfirst($order->payment_status) }}"
                                    class="form-control bg-light" disabled />
                            </div>
                            {{-- <div class="col-md-4 mb-3">
                                <label class="form-label fw-bold">Payment Status</label>
                                <select name="payment_status" class="form-control">
                                    <option value="pending" {{ $order->payment_status == 'pending' ? 'selected' : '' }}>
                                        Pending</option>
                                    <option value="paid" {{ $order->payment_status == 'paid' ? 'selected' : '' }}>Paid
                                    </option>
                                    <option value="failed" {{ $order->payment_status == 'failed' ? 'selected' : '' }}>
                                        Failed</option>
                                    <option value="refunded" {{ $order->payment_status == 'refunded' ? 'selected' : '' }}>
                                        Refunded</option>
                                </select>
                                @error('payment_status')
                                    <div class="text-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div> --}}

                        </div>
                    </div>



                    <!-- Editable Status Section -->
                    <div class="mb-4">
                        <h6 class="text-muted border-bottom pb-2 mb-3">Order Status</h6>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Current Status</label>
                                <select name="order_status" class="form-control">
                                    <option value="pending" {{ $order->status == 'pending' ? 'selected' : '' }}>Pending
                                    </option>
                                    <option value="collected" {{ $order->status == 'collected' ? 'selected' : '' }}>
                                        Collected</option>
                                    <option value="processing" {{ $order->status == 'processing' ? 'selected' : '' }}>
                                        Processing</option>
                                    <option value="completed" {{ $order->status == 'completed' ? 'selected' : '' }}>
                                        Completed</option>
                                    <option value="cancelled" {{ $order->status == 'cancelled' ? 'selected' : '' }}>
                                        Cancelled</option>
                                </select>
                                @error('order_status')
                                    <div class="text-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3" id="cancellationReasonContainer"
                                style="{{ $order->status == 'cancelled' ? '' : 'display: none;' }}">
                                <label class="form-label fw-bold">Cancellation Reason</label>
                                <textarea name="cancel_reason" class="form-control" rows="2">{{ $order->cancel_reason }}</textarea>
                                @error('cancel_reason')
                                    <div class="text-danger mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Submit Button Section -->
                    <div class="d-flex justify-content-end mt-4">
                        <a href="{{ route('sofa-wash-orders.list') }}" class="btn btn-secondary me-2">Cancel</a>
                        <button type="submit" class="btn btn-primary">Update Order</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const statusSelect = document.querySelector('select[name="order_status"]');
                const cancellationContainer = document.getElementById('cancellationReasonContainer');

                statusSelect.addEventListener('change', function() {
                    if (this.value === 'cancelled') {
                        cancellationContainer.style.display = '';
                    } else {
                        cancellationContainer.style.display = 'none';
                    }
                });
            });
        </script>
    @endpush
@endsection