@extends('back_office.layouts.app')

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

                <div class="row">
                    <!-- Order Information -->
                    <div class="col-md-4 mb-3">
                        <label>Order ID</label>
                        <input type="text" value="#{{ $breakdownServiceZoneOrder->id }}" class="form-control" disabled />
                    </div>

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

                    <div class="col-md-4 mb-3">
                        <label>Order Date</label>
                        <input type="text" value="{{ $breakdownServiceZoneOrder->created_at->format('d-m-Y H:i') }}"
                            class="form-control" disabled />
                    </div>

                    <!-- Customer Information -->
                    <div class="col-md-4 mb-3">
                        <label>Customer</label>
                        <input type="text" value="{{ $breakdownServiceZoneOrder->user->name }}" class="form-control"
                            disabled />
                    </div>

                    <div class="col-md-4 mb-3">
                        <label>Customer Phone</label>
                        <input type="text" value="{{ $breakdownServiceZoneOrder->user->phone }}" class="form-control"
                            disabled />
                    </div>

                    <div class="col-md-4 mb-3">
                        <label>Customer Email</label>
                        <input type="text" value="{{ $breakdownServiceZoneOrder->user->email }}" class="form-control"
                            disabled />
                    </div>

                    <!-- Service Zone Information -->
                    <div class="col-md-6 mb-3">
                        <label>Service Zone</label>
                        <input type="text" value="{{ $breakdownServiceZoneOrder->serviceZone->name }}"
                            class="form-control" disabled />
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Zone Price</label>
                        <input type="text"
                            value="QAR {{ number_format($breakdownServiceZoneOrder->serviceZone->price, 2) }}"
                            class="form-control" disabled />
                    </div>

                    <!-- Car Details -->
                    <div class="col-md-6 mb-3">
                        <label>Car Model</label>
                        <input type="text" value="{{ $breakdownServiceZoneOrder->car_model }}" class="form-control"
                            disabled />
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Car Plate Number</label>
                        <input type="text" value="{{ $breakdownServiceZoneOrder->car_plate_number }}"
                            class="form-control" disabled />
                    </div>

                    <!-- Location Details -->
                    <div class="col-md-6 mb-3">
                        <label>Breakdown Location (Coordinates)</label>
                        <div class="input-group">
                            <input type="text"
                                value="{{ $breakdownServiceZoneOrder->latitude }}, {{ $breakdownServiceZoneOrder->longitude }}"
                                class="form-control" disabled />
                            <div class="input-group-append m-2">
                                <a href="https://www.google.com/maps/search/?api=1&query={{ $breakdownServiceZoneOrder->latitude }},{{ $breakdownServiceZoneOrder->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 -->
                    <div class="col-md-6 mb-3">
                        <label>Customer Address</label>
                        <input type="text"
                            value="{{ optional($breakdownServiceZoneOrder->userAddress)->map_address ?? 'N/A' }}"
                            class="form-control" disabled />
                    </div>

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

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

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

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

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

                    <!-- Payment Status (Editable) -->
                    <div class="col-md-6 mb-3">
                        <label>Payment Status</label>
                        <select name="payment_status" class="form-control">
                            <option value="unpaid"
                                {{ $breakdownServiceZoneOrder->payment_status == 'unpaid' ? 'selected' : '' }}>Unpaid
                            </option>
                            <option value="paid"
                                {{ $breakdownServiceZoneOrder->payment_status == 'paid' ? 'selected' : '' }}>Paid</option>
                            <option value="refunded"
                                {{ $breakdownServiceZoneOrder->payment_status == 'refunded' ? 'selected' : '' }}>Refunded
                            </option>
                        </select>
                        @error('payment_status')
                            <p class="error-validation">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Status-specific fields -->
                    @if ($breakdownServiceZoneOrder->status == 'cancelled' && $breakdownServiceZoneOrder->cancellation_reason)
                        <div class="col-md-6 mb-3">
                            <label>Cancellation Reason</label>
                            <textarea class="form-control" disabled>{{ $breakdownServiceZoneOrder->cancellation_reason }}</textarea>
                        </div>
                    @endif

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

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

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

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

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

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

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

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

                    <!-- Submit Button -->
                    <div class="col-md-12 mt-4">
                        <div class="form-group text-right">
                            <a href="{{ route('breakdown-service.zone.orders.index') }}"
                                class="btn btn-secondary mr-2">Back</a>
                            <button type="submit" class="btn btn-info">Update Order</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const statusSelect = document.querySelector('select[name="status"]');

            // Add any status-specific logic here
            statusSelect.addEventListener('change', function() {
                // You can add dynamic field showing/hiding based on status
                // For example, show cancellation reason field when status is changed to 'cancelled'
            });
        });
    </script>
@endsection