@extends('back_office.layouts.app')

@section('content')
    <div>
        <div class="container-fluid">
            <div class="p-4 bg-white row">
                <h5>Edit Breakdown Order</h5>
                <form class="form-horizontal" action="{{ route('breakdown-orders.update', $order->id) }}" method="POST">
                    @csrf

                    <div class="row">
                        <!-- Service Provider -->
                        <div class="col-4">
                            <label>Service Provider</label>
                            <input type="text" value="{{ optional($order->serviceProvider)->title }}" class="form-control"
                                disabled />
                        </div>

                        <!-- Order ID & Order Number -->
                        <div class="col-4">
                            <label>Order ID</label>
                            <input type="text" value="{{ $order->id }}" class="form-control" disabled />
                        </div>

                        <div class="col-4">
                            <label>Order Number</label>
                            <input type="text" value="{{ $order->order_number }}" class="form-control" disabled />
                        </div>

                        <!-- Customer -->
                        <div class="col-4">
                            <label>Customer</label>
                            <input type="text" value="{{ $order->customer->name }}" class="form-control" disabled />
                        </div>

                        <!-- Customer Phone -->
                        <div class="col-4">
                            <label>Customer Phone</label>
                            <input type="text" value="{{ $order->customer->phone }}" class="form-control" disabled />
                        </div>

                        <!-- Customer Email -->
                        <div class="col-4">
                            <label>Customer Email</label>
                            <input type="text" value="{{ $order->customer->email }}" class="form-control" disabled />
                        </div>

                        <!-- Car Details -->
                        <div class="col-4">
                            <label>Car Model</label>
                            <input type="text" value="{{ $order->car_model }}" class="form-control" disabled />
                        </div>

                        <div class="col-4">
                            <label>Car Plate Number</label>
                            <input type="text" value="{{ $order->car_plate_number }}" class="form-control" disabled />
                        </div>

                        <!-- Service Type -->
                        <div class="col-4">
                            <label>Breakdown Service</label>
                            <input type="text" value="{{ optional($order->breakdownService)->name ?? 'N/A' }}"
                                class="form-control" disabled />
                        </div>

                        <!-- Location Details -->
                        <div class="col-6">
                            <label>Breakdown Location (Coordinates)</label>
                            <div class="input-group">
                                <input type="text" value="{{ $order->latitude }}, {{ $order->longitude }}"
                                    class="form-control" disabled />
                                <div class="input-group-append m-2">
                                    <a href="https://www.google.com/maps/search/?api=1&query={{ $order->latitude }},{{ $order->longitude }}"
                                        target="_blank" class="btn btn-outline-primary">
                                        <i class="fas fa-map-marker-alt"></i> View on Map
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- Customer Address (if different from breakdown location) -->
                        <div class="col-6">
                            <label>Customer Address</label>
                            <input type="text" value="{{ optional($order->customerAddress)->map_address ?? 'N/A' }}"
                                class="form-control" disabled />
                        </div>

                        <!-- Price Details -->
                        <div class="col-4">
                            <label>Base Price</label>
                            <input type="text" value="QAR {{ number_format($order->base_price, 2) }}"
                                class="form-control" disabled />
                        </div>

                        <div class="col-4">
                            <label>Distance Charge</label>
                            <input type="text" value="QAR {{ number_format($order->distance_charge, 2) }}"
                                class="form-control" disabled />
                        </div>

                        <div class="col-4">
                            <label>Total Price</label>
                            <input type="text" value="QAR {{ number_format($order->total_price, 2) }}"
                                class="form-control" disabled />
                        </div>

                        <!-- Distance -->
                        <div class="col-4">
                            <label>Distance (KM)</label>
                            <input type="text" value="{{ $order->distance_km }}" class="form-control" disabled />
                        </div>

                        <!-- Payment Details -->
                        <div class="col-4">
                            <label>Payment Method</label>
                            <input type="text" value="{{ ucfirst($order->payment_method) }}" class="form-control"
                                disabled />
                        </div>

                        <div class="col-4">
                            <label>Payment Status</label>
                            <input type="text" value="{{ $order->formatted_payment_status }}" class="form-control"
                                disabled />
                        </div>

                        <!-- Problem Description -->
                        <div class="col-12">
                            <label>Problem Description</label>
                            <textarea class="form-control" rows="3" disabled>{{ $order->description }}</textarea>
                        </div>

                        <!-- Timestamps -->
                        <div class="col-3">
                            <label>Order Created</label>
                            <input type="text" value="{{ $order->created_at->format('d-m-Y H:i') }}"
                                class="form-control" disabled />
                        </div>

                        @if ($order->accepted_at)
                            <div class="col-3">
                                <label>Accepted At</label>
                                <input type="text" value="{{ $order->accepted_at->format('d-m-Y H:i') }}"
                                    class="form-control" disabled />
                            </div>
                        @endif

                        @if ($order->arrived_at)
                            <div class="col-3">
                                <label>Arrived At</label>
                                <input type="text" value="{{ $order->arrived_at->format('d-m-Y H:i') }}"
                                    class="form-control" disabled />
                            </div>
                        @endif

                        @if ($order->started_at)
                            <div class="col-3">
                                <label>Started At</label>
                                <input type="text" value="{{ $order->started_at->format('d-m-Y H:i') }}"
                                    class="form-control" disabled />
                            </div>
                        @endif

                        @if ($order->completed_at)
                            <div class="col-3">
                                <label>Completed At</label>
                                <input type="text" value="{{ $order->completed_at->format('d-m-Y H:i') }}"
                                    class="form-control" disabled />
                            </div>
                        @endif

                        @if ($order->cancelled_at)
                            <div class="col-3">
                                <label>Cancelled At</label>
                                <input type="text" value="{{ $order->cancelled_at->format('d-m-Y H:i') }}"
                                    class="form-control" disabled />
                            </div>
                        @endif

                        <!-- Order Status (Editable) -->
                        <div class="col-6">
                            <label>Order Status</label>
                            <select name="order_status" class="form-control">
                                <option value="pending" {{ $order->status == 'pending' ? 'selected' : '' }}>Pending
                                </option>
                                <option value="accepted" {{ $order->status == 'accepted' ? 'selected' : '' }}>Accepted
                                </option>
                                <option value="en_route" {{ $order->status == 'en_route' ? 'selected' : '' }}>En Route
                                </option>
                                <option value="arrived" {{ $order->status == 'arrived' ? 'selected' : '' }}>Arrived
                                </option>
                                <option value="in_progress" {{ $order->status == 'in_progress' ? 'selected' : '' }}>In
                                    Progress</option>
                                <option value="completed" {{ $order->status == 'completed' ? 'selected' : '' }}>Completed
                                </option>
                                <option value="cancelled" {{ $order->status == 'cancelled' ? 'selected' : '' }}>Cancelled
                                </option>
                            </select>
                            @error('order_status')
                                <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Cancellation Reason (if cancelled) -->
                        @if ($order->status == 'cancelled' && $order->cancellation_reason)
                            <div class="col-6">
                                <label>Cancellation Reason</label>
                                <textarea class="form-control" disabled>{{ $order->cancellation_reason }}</textarea>
                            </div>
                        @endif

                        <!-- Completion Notes (if completed) -->
                        @if ($order->status == 'completed' && $order->completion_notes)
                            <div class="col-6">
                                <label>Completion Notes</label>
                                <textarea class="form-control" disabled>{{ $order->completion_notes }}</textarea>
                            </div>
                        @endif

                        <!-- Rating and Review (if completed and rated) -->
                        @if ($order->rating)
                            <div class="col-3">
                                <label>Rating</label>
                                <div class="form-control">
                                    @for ($i = 1; $i <= 5; $i++)
                                        @if ($i <= $order->rating)
                                            <i class="fas fa-star text-warning"></i>
                                        @else
                                            <i class="far fa-star text-warning"></i>
                                        @endif
                                    @endfor
                                    ({{ $order->rating }}/5)
                                </div>
                            </div>
                        @endif

                        @if ($order->review)
                            <div class="col-9">
                                <label>Customer Review</label>
                                <textarea class="form-control" disabled>{{ $order->review }}</textarea>
                            </div>
                        @endif

                        <!-- Car Photo -->
                        @if ($order->car_photo_path)
                            <div class="col-6">
                                <label>Car Photo</label>
                                <div class="mt-2">
                                    <a href="{{ asset('storage/' . $order->car_photo_path) }}" target="_blank">
                                        <img src="{{ asset('storage/' . $order->car_photo_path) }}" width="200"
                                            height="150" style="object-fit: cover;" alt="Car Photo"
                                            class="img-thumbnail">
                                    </a>
                                </div>
                            </div>
                        @endif

                        <!-- Service Provider Payment Info -->
                        @if ($order->serviceProviderPayment)
                            <div class="col-6">
                                <label>Payment Type</label>
                                <input type="text"
                                    value="{{ optional($order->serviceProviderPayment->payment->paymentType)->payment_type ?? 'N/A' }}"
                                    class="form-control" disabled />
                            </div>
                        @endif

                        <!-- Submit Button -->
                        <div class="col-md-12 mt-4">
                            <div class="form-group text-right">
                                <a href="{{ route('breakdown-orders.list', ['sp_id' => $order->serviceProvider->id]) }}"
                                    class="btn btn-secondary mr-2">Back</a>
                                <button type="submit" class="btn btn-info">Update Order</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        // Optional: Show/hide fields based on status
        document.addEventListener('DOMContentLoaded', function() {
            const statusSelect = document.querySelector('select[name="order_status"]');

            // Add any status-specific logic here
            statusSelect.addEventListener('change', function() {
                // You can add dynamic field showing/hiding based on status
            });
        });
    </script>
@endsection