@extends('back_office.layouts.app')

@section('content')
    <div class="container-fluid">
        <div class="p-4 bg-white row">
            <h5>Create New Breakdown Service Zone Order</h5>
            <form id="orderForm" class="form-horizontal" action="{{ route('breakdown-service.zone.orders.store') }}" method="POST"
                enctype="multipart/form-data">
                @csrf

                <div class="row">
                    <!-- Customer Selection -->
                    <div class="col-md-6 mb-3">
                        <label>Customer</label>
                        <select name="user_id" class="select2 form-control" required>
                            <option value="">Select Customer</option>
                            @foreach ($customers as $customer)
                                <option value="{{ $customer->id }}">
                                    {{ $customer->name }} ({{ $customer->phone }})
                                </option>
                            @endforeach
                        </select>
                        @error('user_id')
                            <p class="error-validation">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Service Zone Selection -->
                    <div class="col-md-6 mb-3">
                        <label>Service Zone</label>
                        <select name="service_zone_id" class="form-control" id="serviceZone" required>
                            <option value="">Select Service Zone</option>
                            @foreach ($serviceZones as $zone)
                                <option value="{{ $zone->id }}" data-price="{{ $zone->price }}">
                                    {{ $zone->name }} - QAR {{ number_format($zone->price, 2) }}
                                </option>
                            @endforeach
                        </select>
                        @error('service_zone_id')
                            <p class="error-validation">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Car Details -->
                    <div class="col-md-6 mb-3">
                        <label>Car Model</label>
                        <input type="text" name="car_model" class="form-control" required>
                        @error('car_model')
                            <p class="error-validation">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Car Plate Number</label>
                        <input type="text" name="car_plate_number" class="form-control" required>
                        @error('car_plate_number')
                            <p class="error-validation">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Location Coordinates -->
                    <div class="col-md-6 mb-3">
                        <label>Latitude</label>
                        <input type="number" name="latitude" class="form-control" step="any" required>
                        @error('latitude')
                            <p class="error-validation">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Longitude</label>
                        <input type="number" name="longitude" class="form-control" step="any" required>
                        @error('longitude')
                            <p class="error-validation">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Customer Address (Optional) -->
                    <div class="col-md-6 mb-3">
                        <label>Customer Address (Optional)</label>
                        <select name="user_address_id" class="form-control">
                            <option value="">Select Address (Optional)</option>
                            @if(isset($customerAddresses))
                                @foreach ($customerAddresses as $address)
                                    <option value="{{ $address->id }}">
                                        {{ $address->map_address ?? 'Address #' . $address->id }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                        @error('user_address_id')
                            <p class="error-validation">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Payment Method -->
                    <div class="col-md-6 mb-3">
                        <label>Payment Method</label>
                        <select name="payment_method" class="form-control" required>
                            <option value="">Select Payment Method</option>
                            <option value="cash">Cash</option>
                            <option value="card">Card</option>
                            <option value="online">Online</option>
                        </select>
                        @error('payment_method')
                            <p class="error-validation">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Price Display -->
                    <div class="col-md-6 mb-3">
                        <label>Total Price (QAR)</label>
                        <input type="number" name="total_price" class="form-control" step="0.01" readonly>
                        @error('total_price')
                            <p class="error-validation">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Car Photo Upload -->
                    <div class="col-md-6 mb-3">
                        <label>Car Photo (Optional)</label>
                        <input type="file" name="car_photo" class="form-control" accept="image/*">
                        @error('car_photo')
                            <p class="error-validation">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Problem Description -->
                    <div class="col-md-12 mb-3">
                        <label>Problem Description</label>
                        <textarea name="description" class="form-control" rows="4" placeholder="Describe the breakdown issue..."></textarea>
                        @error('description')
                            <p class="error-validation">{{ $message }}</p>
                        @enderror
                    </div>

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

@push('scripts')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize Select2 for customer selection
            $('.select2').select2();

            // Update price when service zone is selected
            $('#serviceZone').on('change', function() {
                const selectedOption = $(this).find('option:selected');
                const price = selectedOption.data('price') || 0;
                $('input[name="total_price"]').val(price);
            });

            // Load customer addresses when customer is selected
            $('select[name="user_id"]').on('change', function() {
                const customerId = $(this).val();
                const addressSelect = $('select[name="user_address_id"]');

                if (customerId) {
                    // Clear existing options except the first one
                    addressSelect.find('option:not(:first)').remove();

                    // Load addresses via AJAX
                    $.ajax({
                        url: '/admin/customers/' + customerId + '/addresses',
                        type: 'GET',
                        success: function(response) {
                            if (response.addresses && response.addresses.length > 0) {
                                response.addresses.forEach(function(address) {
                                    addressSelect.append(
                                        $('<option>', {
                                            value: address.id,
                                            text: address.map_address || 'Address #' + address.id
                                        })
                                    );
                                });
                            }
                        },
                        error: function() {
                            console.log('Failed to load customer addresses');
                        }
                    });
                } else {
                    // Clear addresses if no customer selected
                    addressSelect.find('option:not(:first)').remove();
                }
            });

            // Form validation
            $('#orderForm').on('submit', function(e) {
                const serviceZone = $('#serviceZone').val();
                const customer = $('select[name="user_id"]').val();

                if (!serviceZone || !customer) {
                    e.preventDefault();
                    alert('Please select both customer and service zone before submitting.');
                }
            });
        });
    </script>
@endpush