<div class="col-md-12 mb-20">
    <div id="slotContainer"></div>
</div>

<?php $__env->startPush('scripts'); ?>
<script>
    $(document).ready(function() {
        // Show day field based on schedule selection
        $('#scheduled').on('change', function() {
            var schedule = $(this).val();
            var slotContainer = $('#slotContainer');
            slotContainer.empty();

            if (schedule === 'once') {
                slotContainer.html(`
                    <div class="row" id="once_schedule">
                        <div class="col-md-4">
                            <label class="primary_input_label"><?php echo app('translator')->get('common.select_day'); ?></label>
                            <select class="form-control" name="day_1" id="day_1">
                                <option value=""><?php echo app('translator')->get('common.select_day'); ?></option>
                                <option value="Sunday"><?php echo app('translator')->get('common.sunday'); ?></option>
                                <option value="Monday"><?php echo app('translator')->get('common.monday'); ?></option>
                                <option value="Tuesday"><?php echo app('translator')->get('common.tuesday'); ?></option>
                                <option value="Wednesday"><?php echo app('translator')->get('common.wednesday'); ?></option>
                                <option value="Thursday"><?php echo app('translator')->get('common.thursday'); ?></option>
                                <option value="Friday"><?php echo app('translator')->get('common.friday'); ?></option>
                                <option value="Saturday"><?php echo app('translator')->get('common.saturday'); ?></option>
                            </select>
                        </div>
                        <div class="col-md-4" id="start_time_container_1"></div>
                        <div class="col-md-4" id="end_time_container_1"></div>
                    </div>

                    <div class="row mt-4">
                        <div class="col-2">
                            <h5><?php echo app('translator')->get('academics.available_teachers'); ?></h5>
                        </div>
                        <div class="col-1">
                            <i class="fas fa-circle" style="color: #FFD43B;"></i> <?php echo app('translator')->get('academics.available'); ?>
                        </div>
                        <div class="col-1">
                            <i class="fas fa-circle" style="color: #08ca6f;"></i> <?php echo app('translator')->get('academics.paid'); ?>
                        </div>
                        <div class="col-1">
                            <i class="fas fa-circle" style="color: #ff3c3c;"></i> <?php echo app('translator')->get('academics.unpaid'); ?>
                        </div>
                    </div>

                    <div id="teachers_table" class="mt-3"></div>
                `);
            } else if (schedule === 'twice') {
                slotContainer.html(`
                    <div class="row mb-3" id="twice_schedule_1">
                        <div class="col-md-4">
                            <label class="primary_input_label"><?php echo app('translator')->get('common.select_day'); ?></label>
                            <select class="form-control" name="day_1" id="day_1">
                                <option value=""><?php echo app('translator')->get('common.select_day'); ?></option>
                                <option value="Sunday"><?php echo app('translator')->get('common.sunday'); ?></option>
                                <option value="Monday"><?php echo app('translator')->get('common.monday'); ?></option>
                                <option value="Tuesday"><?php echo app('translator')->get('common.tuesday'); ?></option>
                                <option value="Wednesday"><?php echo app('translator')->get('common.wednesday'); ?></option>
                                <option value="Thursday"><?php echo app('translator')->get('common.thursday'); ?></option>
                                <option value="Friday"><?php echo app('translator')->get('common.friday'); ?></option>
                                <option value="Saturday"><?php echo app('translator')->get('common.saturday'); ?></option>
                            </select>
                        </div>
                        <div class="col-md-4" id="start_time_container_1"></div>
                        <div class="col-md-4" id="end_time_container_1"></div>
                    </div>
                    <div class="row" id="twice_schedule_2">
                        <div class="col-md-4">
                            <label class="primary_input_label"><?php echo app('translator')->get('common.select_day'); ?></label>
                            <select class="form-control" name="day_2" id="day_2">
                                <option value=""><?php echo app('translator')->get('common.select_day'); ?></option>
                                <option value="Sunday"><?php echo app('translator')->get('common.sunday'); ?></option>
                                <option value="Monday"><?php echo app('translator')->get('common.monday'); ?></option>
                                <option value="Tuesday"><?php echo app('translator')->get('common.tuesday'); ?></option>
                                <option value="Wednesday"><?php echo app('translator')->get('common.wednesday'); ?></option>
                                <option value="Thursday"><?php echo app('translator')->get('common.thursday'); ?></option>
                                <option value="Friday"><?php echo app('translator')->get('common.friday'); ?></option>
                                <option value="Saturday"><?php echo app('translator')->get('common.saturday'); ?></option>
                            </select>
                        </div>
                        <div class="col-md-4" id="start_time_container_2"></div>
                        <div class="col-md-4" id="end_time_container_2"></div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-2">
                            <h5><?php echo app('translator')->get('academics.available_teachers'); ?></h5>
                        </div>
                        <div class="col-1">
                            <i class="fas fa-circle" style="color: #FFD43B;"></i> <?php echo app('translator')->get('academics.available'); ?>
                        </div>
                        <div class="col-1">
                            <i class="fas fa-circle" style="color: #08ca6f;"></i> <?php echo app('translator')->get('academics.paid'); ?>
                        </div>
                        <div class="col-1">
                            <i class="fas fa-circle" style="color: #ff3c3c;"></i> <?php echo app('translator')->get('academics.unpaid'); ?>
                        </div>
                    </div>
                    <div id="teachers_table" class="mt-3 table-container"></div>
                `);
            }
        });
    });
</script>
<?php $__env->stopPush(); ?><?php /**PATH D:\tailors-dev\upedia\resources\views/backEnd/humanResource/calendar/calendar_slots/calendar_slots_container.blade.php ENDPATH**/ ?>