@extends('back_office.layouts.app')

@section('content')
    <div>
        <div class="container-fluid">
            <div class="p-4 bg-white row">
                <h5>Create New Carpet Wash Days</h5>
                <form class="form-horizontal" action="{{ route('wash-day.store', ['type' => $type]) }}" method="POST">
                    @csrf
                    @method('POST')

                    <div class="row">
                        <input type="hidden" name="sp_id" value="{{ $sp_id }}">
                        <!-- Slot Selection -->
                        <div class="col-4">
                            <label>Slot</label>
                            <select name="carpet_wash_slot_id[]" class="form-control" id="slotSelect" multiple required>
                                @foreach ($slots as $slot)
                                    @php
                                        // Map day numbers to day names
                                        $dayNames = [
                                            1 => 'Monday',
                                            2 => 'Tuesday',
                                            3 => 'Wednesday',
                                            4 => 'Thursday',
                                            5 => 'Friday',
                                            6 => 'Saturday',
                                            7 => 'Sunday',
                                        ];
                                        $dayName = $dayNames[$slot->day] ?? 'Unknown Day';
                                    @endphp
                                    <option value="{{ $slot->id }}" data-number-of-orders="{{ $slot->no_of_orders }}">
                                        {{ $dayName }} - {{ $slot->slot_name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('carpet_wash_slot_id')
                                <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Start Date -->
                        <div class="col-4">
                            <label>Start Date</label>
                            <input type="date" placeholder="Start Date" name="start_date" value="{{ old('start_date') }}"
                                class="form-control" required />
                            @error('start_date')
                                <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- End Date -->
                        <div class="col-4">
                            <label>End Date</label>
                            <input type="date" placeholder="End Date" name="end_date" value="{{ old('end_date') }}"
                                class="form-control" required />
                            @error('end_date')
                                <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </div>


                        <!-- Number of Orders -->
                        <div class="col-4">
                            <label>Number of Orders</label>
                            <input type="number" placeholder="Number of Orders" name="no_of_orders" id="no_of_orders"
                                min="0" value="{{ old('no_of_orders', 0) }}" class="form-control" required />
                            @error('no_of_orders')
                                <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </div>



                        <!-- Notes -->
                        <div class="col-4">
                            <label>Notes</label>
                            <textarea placeholder="Notes" name="notes" class="form-control">{{ old('notes') }}</textarea>
                            @error('notes')
                                <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Is Available -->
                        <div class="col-4">
                            <label>Is Available</label>
                            <select name="is_available" class="form-control">
                                <option value="1" {{ old('is_available', 1) == 1 ? 'selected' : '' }}>Yes</option>
                                <option value="0" {{ old('is_available') == 0 ? 'selected' : '' }}>No</option>
                            </select>
                            @error('is_available')
                                <p class="error-validation">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Submit Button -->
                        <div class="col-md-12 mt-4">
                            <div class="form-group">
                                <div class="col-lg-12 text-right">
                                    <button type="submit" class="btn btn-info">Save Wash Days</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            // Set the default number of orders based on the selected slot
            function updateNumberOfOrders() {
                let selectedSlot = $('#slotSelect').find(':selected');
                let numberOfOrders = selectedSlot.data('number-of-orders');
                $('#no_of_orders').val(numberOfOrders);
            }

            // Update number of orders when the slot changes
            $('#slotSelect').on('change', function() {
                updateNumberOfOrders();
            });

            // Initialize number of orders on page load
            updateNumberOfOrders();
        });
    </script>
@endpush