@extends('back_office.layouts.app')

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

                <div class="row">
                    <input type="hidden" name="service_provider_id" value="{{ $serviceProvider->id }}">

                    <!-- Service Provider Display -->
                    <div class="col-md-4 mb-3">
                        <label>Service Provider</label>
                        <input type="text" class="form-control"
                            value="{{ $serviceProvider->title }} - ${{ number_format($providerPrice, 2) }}/m²" readonly>
                    </div>

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

                    <!-- Date Picker -->
                    <div class="col-md-6 mb-3">
                        <label>Select Date</label>
                        <input type="date" name="carpet_wash_date" id="carpetWashDate" class="form-control" required>
                        @error('carpet_wash_date')
                            <p class="error-validation">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Carpet Wash Slot (Dynamically Loaded) -->
                    <div class="col-md-6 mb-3">
                        <label>Available Slots</label>
                        <select name="carpet_wash_slot_id" id="carpetWashSlot" class="form-control" required>
                            <option value="">Select a date first</option>
                        </select>
                        @error('carpet_wash_slot_id')
                            <p class="error-validation">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Carpet Dimensions -->
                    <div class="col-md-3 mb-3">
                        <label>Carpet Width (m)</label>
                        <input type="number" name="carpet_width" class="form-control dimension-input" step="0.01"
                            required>
                    </div>

                    <div class="col-md-3 mb-3">
                        <label>Carpet Height (m)</label>
                        <input type="number" name="carpet_height" class="form-control dimension-input" step="0.01"
                            required>
                    </div>

                    <div class="col-md-3 mb-3">
                        <label>Quantity</label>
                        <input type="number" name="qty" class="form-control dimension-input" min="1"
                            value="1" required>
                    </div>

                    <!-- Price fields -->
                    <div class="col-md-3 mb-3">
                        <label>Price per m² ($)</label>
                        <input type="number" name="price" class="form-control" value="{{ $providerPrice }}"
                            step="0.01" readonly>
                    </div>

                    <div class="col-md-3 mb-3">
                        <label>Total Price ($)</label>
                        <input type="number" name="total_price" class="form-control" step="0.01" readonly>
                    </div>

                    <!-- Address Information -->
                    <div class="col-md-6 mb-3">
                        <label>Customer Address</label>
                        <textarea name="user_address" class="form-control" rows="3" required></textarea>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Area</label>
                        <input type="text" name="area" class="form-control" required>
                    </div>

                    <!-- Image Upload -->
                    <div class="col-md-6 mb-3">
                        <label>Carpet Image</label>
                        <input type="file" name="carpet_image" class="form-control" accept="image/*">
                    </div>

                    <!-- Special Instructions -->
                    <div class="col-md-6 mb-3">
                        <label>Special Instructions</label>
                        <textarea name="special_instructions" class="form-control" rows="3"></textarea>
                    </div>

                    <!-- Submit Button -->
                    <div class="col-md-12 mt-4 text-right">
                        <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() {
            $('.select2').select2();

            const pricePerSqm = {{ $providerPrice }};

            function calculateTotal() {
                const width = parseFloat($('input[name="carpet_width"]').val()) || 0;
                const height = parseFloat($('input[name="carpet_height"]').val()) || 0;
                const qty = parseInt($('input[name="qty"]').val()) || 0;

                const area = width * height;
                const total = area * qty * pricePerSqm;
                $('input[name="total_price"]').val(total.toFixed(2));
            }

            $('.dimension-input').on('input', calculateTotal);

            $('#carpetWashDate').on('change', function() {
                const selectedDate = $(this).val();
                const serviceProviderId = $('input[name="service_provider_id"]').val();
                if (selectedDate) {
                    $.ajax({
                        url: "{{ route('carpet-wash-days.get-slots') }}",
                        type: "GET",
                        data: {
                            date: selectedDate,
                            service_provider_id: serviceProviderId
                        },
                        success: function(response) {
                            let slotOptions = '<option value="">Select Slot</option>';
                            Object.values(response.slots).forEach(slot => {
                                slotOptions +=
                                    `<option value="${slot.id}"> ${slot.date} - ${slot.carpet_wash_slot.slot_name} </option>`;
                            });

                            $('#carpetWashSlot').html(slotOptions);
                        },
                        error: function() {
                            alert('Failed to fetch slots. Please try again.');
                        }
                    });
                } else {
                    $('#carpetWashSlot').html('<option value="">Select a date first</option>');
                }
            });
        });
    </script>
@endpush