@extends('back_office.layouts.app')

@section('content')
    <div>
        <div class="container-fluid">
            <div class="p-4 bg-white row">
                <h5>Edit Carpet Wash Slot</h5>
                <form class="form-horizontal" action="{{ route('wash-slots.update', ['type' => $type, 'id' => $slot->id]) }}"
                    method="POST">
                    @csrf

                    <div class="row">

                        <div id="slot_main_section" class="row">
                            <div class="row slot_section">
                                <div class="col-4">
                                    <label>Day</label>
                                    <select name="day" class="form-control">
                                        <option value="1" {{ $slot->day == '1' ? 'selected' : '' }}>Monday</option>
                                        <option value="2" {{ $slot->day == '2' ? 'selected' : '' }}>Tuesday</option>
                                        <option value="3" {{ $slot->day == '3' ? 'selected' : '' }}>Wednesday</option>
                                        <option value="4" {{ $slot->day == '4' ? 'selected' : '' }}>Thursday</option>
                                        <option value="5" {{ $slot->day == '5' ? 'selected' : '' }}>Friday</option>
                                        <option value="6" {{ $slot->day == '6' ? 'selected' : '' }}>Saturday</option>
                                        <option value="7" {{ $slot->day == '7' ? 'selected' : '' }}>Sunday</option>
                                    </select>
                                    @error('day')
                                        <p class="error-validation">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="col-4">
                                    <label>Start Time</label>
                                    <input type="time" placeholder="Start Time" name="start_time"
                                        value="{{ old('start_time', $slot->start_time) }}"
                                        class="form-control start_time" />
                                    @error('start_time')
                                        <p class="error-validation">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="col-4">
                                    <label>End Time</label>
                                    <input type="time" placeholder="End Time" name="end_time"
                                        value="{{ old('end_time', $slot->end_time) }}" class="form-control end_time" />
                                    @error('end_time')
                                        <p class="error-validation">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="col-4">
                                    <label>Number Of Slots</label>
                                    <input type="number" placeholder="Number Of Slots" name="no_of_orders" min="1"
                                        value="{{ old('no_of_orders', $slot->no_of_orders) }}" class="form-control" />
                                    @error('no_of_orders')
                                        <p class="error-validation">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="col-4">
                                    <label>Slot Name</label>
                                    <input type="text" placeholder="Slot Name" name="slot_name"
                                        value="{{ old('slot_name', $slot->slot_name) }}" class="form-control slot_name"
                                        readonly />
                                    @error('slot_name')
                                        <p class="error-validation">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <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">Update Slot</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function formatTime(time) {
            let [hours, minutes] = time.split(':');
            let ampm = hours >= 12 ? 'PM' : 'AM';
            hours = hours % 12;
            hours = hours ? hours : 12; // the hour '0' should be '12'
            return `${hours}:${minutes} ${ampm}`;
        }

        function updateSlotName() {
            let startTime = $('.start_time').val();
            let endTime = $('.end_time').val();

            if (startTime && endTime) {
                let formattedStartTime = formatTime(startTime);
                let formattedEndTime = formatTime(endTime);
                $('.slot_name').val(`${formattedStartTime} to ${formattedEndTime}`);
            }
        }

        $('body').on('change', '.start_time, .end_time', function() {
            updateSlotName();
        });

        // Initial call to set the slot name if values are pre-filled
        $(document).ready(function() {
            updateSlotName();
        });
    </script>
@endpush