

<?php $__env->startSection('title', 'Create Equipment Reservation'); ?>

<?php $__env->startSection('content'); ?>
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Create New Equipment Reservation</h5>
                        <a href="<?php echo e(route('equipment-reservations.index')); ?>" class="btn btn-outline-secondary btn-sm">
                            <i class="bi bi-arrow-left"></i> Back to Reservations
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <form action="<?php echo e(route('equipment-reservations.store')); ?>" method="POST" id="reservationForm">
                        <?php echo csrf_field(); ?>
                        
                        <div class="row">
                            <div class="col-md-8">
                                <!-- Equipment Selection -->
                                <div class="mb-4">
                                    <h6 class="text-primary mb-3">Equipment Selection</h6>
                                    
                                    <div class="mb-3">
                                        <label for="equipment_id" class="form-label">Select Equipment *</label>
                                        <select class="form-select <?php $__errorArgs = ['equipment_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" 
                                                id="equipment_id" name="equipment_id" required>
                                            <option value="">Choose Equipment</option>
                                            <?php $__currentLoopData = $equipment; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <option value="<?php echo e($item->id); ?>" 
                                                        <?php echo e(old('equipment_id', $selectedEquipment?->id) == $item->id ? 'selected' : ''); ?>

                                                        data-type="<?php echo e($item->type); ?>"
                                                        data-start-time="<?php echo e($item->start_time->format('H:i')); ?>"
                                                        data-end-time="<?php echo e($item->end_time->format('H:i')); ?>"
                                                        data-slot-duration="<?php echo e($item->slot_duration); ?>">
                                                    <?php echo e($item->name); ?> (<?php echo e($item->type_name); ?>)
                                                </option>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </select>
                                        <?php $__errorArgs = ['equipment_id'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                            <div class="invalid-feedback"><?php echo e($message); ?></div>
                                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                    </div>
                                    
                                    <div id="equipmentInfo" class="alert alert-info d-none">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <strong>Operating Hours:</strong><br>
                                                <span id="operatingHours">-</span>
                                            </div>
                                            <div class="col-md-4">
                                                <strong>Slot Duration:</strong><br>
                                                <span id="slotDuration">-</span>
                                            </div>
                                            <div class="col-md-4">
                                                <strong>Available Slots:</strong><br>
                                                <span id="availableSlots">-</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Date and Time Selection -->
                                <div class="mb-4">
                                    <h6 class="text-primary mb-3">Date and Time Selection</h6>
                                    
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="reservation_date" class="form-label">Reservation Date *</label>
                                            <input type="date" class="form-control <?php $__errorArgs = ['reservation_date'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" 
                                                   id="reservation_date" name="reservation_date" 
                                                   value="<?php echo e(old('reservation_date', $selectedDate)); ?>" 
                                                   min="<?php echo e(date('Y-m-d')); ?>" required>
                                            <?php $__errorArgs = ['reservation_date'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                                <div class="invalid-feedback"><?php echo e($message); ?></div>
                                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                        </div>
                                        
                                        <div class="col-md-6 mb-3">
                                            <label for="start_time" class="form-label">Start Time *</label>
                                            <select class="form-select <?php $__errorArgs = ['start_time'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" 
                                                    id="start_time" name="start_time" required>
                                                <option value="">Select Date and Equipment First</option>
                                            </select>
                                            <?php $__errorArgs = ['start_time'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                                <div class="invalid-feedback"><?php echo e($message); ?></div>
                                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                        </div>
                                    </div>
                                    
                                    <div id="timeSlotsInfo" class="alert alert-warning d-none">
                                        <i class="bi bi-info-circle"></i>
                                        <span id="timeSlotsMessage">Select equipment and date to see available time slots</span>
                                    </div>
                                </div>

                                <!-- Additional Information -->
                                <div class="mb-4">
                                    <h6 class="text-primary mb-3">Additional Information</h6>
                                    
                                    <div class="mb-3">
                                        <label for="notes" class="form-label">Notes</label>
                                        <textarea class="form-control <?php $__errorArgs = ['notes'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" 
                                                  id="notes" name="notes" rows="3" 
                                                  placeholder="Any additional notes or special requirements..."><?php echo e(old('notes')); ?></textarea>
                                        <?php $__errorArgs = ['notes'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                            <div class="invalid-feedback"><?php echo e($message); ?></div>
                                        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <!-- Reservation Summary -->
                                <div class="card bg-light">
                                    <div class="card-header">
                                        <h6 class="mb-0">Reservation Summary</h6>
                                    </div>
                                    <div class="card-body">
                                        <div id="reservationSummary">
                                            <p class="text-muted">Select equipment and time to see reservation details</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Quick Help -->
                                <div class="card mt-3">
                                    <div class="card-header">
                                        <h6 class="mb-0">Quick Help</h6>
                                    </div>
                                    <div class="card-body">
                                        <ul class="list-unstyled small">
                                            <li><i class="bi bi-info-circle text-primary"></i> Reservations can be made for today or future dates</li>
                                            <li><i class="bi bi-clock text-primary"></i> Time slots are 30 minutes by default</li>
                                            <li><i class="bi bi-calendar text-primary"></i> Operating hours are 6:00 AM to 6:00 PM</li>
                                            <li><i class="bi bi-check-circle text-primary"></i> You can reserve multiple slots for the same equipment</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <hr>

                        <div class="d-flex justify-content-end gap-2">
                            <a href="<?php echo e(route('equipment-reservations.index')); ?>" class="btn btn-outline-secondary">
                                Cancel
                            </a>
                            <button type="submit" class="btn btn-primary" id="submitBtn" disabled>
                                <i class="bi bi-check-circle"></i> Create Reservation
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const equipmentSelect = document.getElementById('equipment_id');
    const dateInput = document.getElementById('reservation_date');
    const startTimeSelect = document.getElementById('start_time');
    const equipmentInfo = document.getElementById('equipmentInfo');
    const timeSlotsInfo = document.getElementById('timeSlotsInfo');
    const reservationSummary = document.getElementById('reservationSummary');
    const submitBtn = document.getElementById('submitBtn');
    
    let selectedEquipment = null;
    let availableSlots = [];

    // Update equipment info when equipment is selected
    equipmentSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        if (this.value) {
            selectedEquipment = {
                id: this.value,
                name: selectedOption.text,
                type: selectedOption.dataset.type,
                startTime: selectedOption.dataset.startTime,
                endTime: selectedOption.dataset.endTime,
                slotDuration: selectedOption.dataset.slotDuration
            };
            
            // Show equipment info
            document.getElementById('operatingHours').textContent = `${selectedEquipment.startTime} - ${selectedEquipment.endTime}`;
            document.getElementById('slotDuration').textContent = `${selectedEquipment.slotDuration} minutes`;
            equipmentInfo.classList.remove('d-none');
            
            // Load time slots if date is selected
            if (dateInput.value) {
                loadTimeSlots();
            }
        } else {
            selectedEquipment = null;
            equipmentInfo.classList.add('d-none');
            timeSlotsInfo.classList.add('d-none');
            startTimeSelect.innerHTML = '<option value="">Select Equipment First</option>';
            updateReservationSummary();
        }
    });

    // Load time slots when date changes
    dateInput.addEventListener('change', function() {
        if (equipmentSelect.value && this.value) {
            loadTimeSlots();
        }
    });

    // Update start time options when time slots are loaded
    startTimeSelect.addEventListener('change', function() {
        updateReservationSummary();
    });

    function loadTimeSlots() {
        if (!selectedEquipment || !dateInput.value) return;

        const url = `/equipment/${selectedEquipment.id}/time-slots?date=${dateInput.value}`;
        
        fetch(url)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    availableSlots = data.data.available_slots || [];
                    console.log('Available slots:', availableSlots); // Debug log
                    updateTimeSlotsSelect();
                    updateTimeSlotsInfo();
                }
            })
            .catch(error => {
                console.error('Error loading time slots:', error);
                timeSlotsInfo.classList.remove('d-none');
                timeSlotsInfo.classList.remove('alert-success');
                timeSlotsInfo.classList.add('alert-warning');
                document.getElementById('timeSlotsMessage').textContent = 'Error loading time slots. Please try again.';
            });
    }

    function updateTimeSlotsSelect() {
        startTimeSelect.innerHTML = '<option value="">Select Time Slot</option>';
        
        if (availableSlots && availableSlots.length > 0) {
            availableSlots.forEach(slot => {
                const option = document.createElement('option');
                option.value = slot.start_time;
                option.textContent = `${slot.start_time} - ${slot.end_time}`;
                startTimeSelect.appendChild(option);
            });
            
            document.getElementById('availableSlots').textContent = availableSlots.length;
        } else {
            startTimeSelect.innerHTML = '<option value="">No available slots</option>';
            document.getElementById('availableSlots').textContent = '0';
        }
    }

    function updateTimeSlotsInfo() {
        if (availableSlots && availableSlots.length > 0) {
            timeSlotsInfo.classList.remove('d-none');
            timeSlotsInfo.classList.remove('alert-warning');
            timeSlotsInfo.classList.add('alert-success');
            document.getElementById('timeSlotsMessage').textContent = 
                `${availableSlots.length} time slot(s) available for the selected date`;
        } else {
            timeSlotsInfo.classList.remove('d-none');
            timeSlotsInfo.classList.remove('alert-success');
            timeSlotsInfo.classList.add('alert-warning');
            document.getElementById('timeSlotsMessage').textContent = 
                'No available time slots for the selected date';
        }
    }

    function updateReservationSummary() {
        if (selectedEquipment && dateInput.value && startTimeSelect.value) {
            const selectedSlot = availableSlots.find(slot => slot.start_time === startTimeSelect.value);
            const duration = selectedEquipment.slotDuration;
            
            reservationSummary.innerHTML = `
                <div class="mb-2">
                    <strong>Equipment:</strong><br>
                    ${selectedEquipment.name}
                </div>
                <div class="mb-2">
                    <strong>Date:</strong><br>
                    ${new Date(dateInput.value).toLocaleDateString()}
                </div>
                <div class="mb-2">
                    <strong>Time:</strong><br>
                    ${startTimeSelect.value} - ${selectedSlot ? selectedSlot.end_time : ''}
                </div>
                <div class="mb-2">
                    <strong>Duration:</strong><br>
                    ${duration} minutes
                </div>
                <hr>
                <div class="text-success">
                    <i class="bi bi-check-circle"></i> Ready to create reservation
                </div>
            `;
            
            submitBtn.disabled = false;
        } else {
            reservationSummary.innerHTML = '<p class="text-muted">Select equipment and time to see reservation details</p>';
            submitBtn.disabled = true;
        }
    }

    // Initialize if equipment is pre-selected
    if (equipmentSelect.value) {
        equipmentSelect.dispatchEvent(new Event('change'));
    }
});
</script>
<?php $__env->stopPush(); ?> 
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\solen-north-coast\resources\views/equipment_reservations/create.blade.php ENDPATH**/ ?>