1#@!#!123s

: / home / bmsnrajganj / public_html / erp / application / views / admin / stuattendence /
Filename : set_holidays.php
back
<style>
/* Parent Container */
.holiday-form-parent {
    max-width: 800px;
    margin: 12px auto;
    padding: 0px;
    /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
    position: relative;
    overflow: hidden;
}

.holiday-form-parent::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* Form Box */
.holiday-form-box {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
}

.form-header {
    text-align: center;
    margin-bottom: 32px;

}


.form-title {
     
    font-size: 30px;
    font-weight: 700;
    /*background: linear-gradient(135deg, #667eea, #764ba2);*/
    /*-webkit-background-clip: text;*/
    /*-webkit-text-fill-color: transparent;*/
    background-clip: text;
    margin-bottom: 8px;
    color:red;
}

.form-subtitle {
    color: #6b7280;
    font-size: 16px;
    font-weight: 500;
}

/* Form Groups */
.form-group {
    margin-bottom: 10px;
    position: relative;
}

.form-label {
    display: block;
    font-size: 15.2px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    transform: translateY(0);
    transition: all 0.3s ease;
}

.form-input {
    width: 100%;
    padding: 8px 16px;
    font-size: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    transition: all 0.3s ease;
    outline: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.form-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

.form-input:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Special styling for different input types */
.form-input[type="date"] {
    color: #4b5563;
}

.form-input[type="date"]::-webkit-calendar-picker-indicator {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>') no-repeat center;
    color: #667eea;
    cursor: pointer;
}

/* Conditional Class/Section Container */
.conditional-container {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border: 2px solid #bae6fd;
    border-radius: 12px;
    padding: 20px;
    margin-top: 14px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
}

.conditional-container.show {
    opacity: 1;
    max-height: 300px;
    margin-bottom:10px;
}

.conditional-title {
    color: #0369a1;
    font-weight: 600;
    font-size: 17.6px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.conditional-title::before {
    content: '🎯';
    margin-right: 8px;
}

/* Form Grid for Class and Section */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Submit Button */
.submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 20px 32px;
    border-radius: 12px;
    font-size: 17.6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    margin-top: 16px;
    position: relative;
    overflow: hidden;
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.submit-btn:hover::before {
    left: 100%;
}

.submit-btn:active {
    transform: translateY(0);
}

/* Icons for inputs */
.input-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

/* Success/Error Messages */
.message {
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-weight: 500;
    display: none;
}

.message.success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    display: block;
}

.message.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    display: block;
}

/* Responsive Design */
@media (max-width: 640px) {
    .holiday-form-parent {
        margin: 16px;
        padding: 8px;
    }

    .holiday-form-box {
        padding: 24px;
    }

    .form-title {
        font-size: 24px;
    }

    .form-input {
        padding: 6px 10px;
    }
}

/* Animation for form appearance */
.holiday-form-parent {
    animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Floating label effect */
.form-group.focused .form-label {
    color: #667eea;
    transform: translateY(-2px);
}

    </style>

<div class="content-wrapper" style="min-height: 946px;">

          <!-- Parent Container -->
    <div class="holiday-form-parent">
        <!-- Form Box -->
        <div class="holiday-form-box">
            <!-- Header -->
            <div class="form-header">
                <h2 class="form-title" >SET HOLIDAYS </h2>
      
            </div>

            <!-- Messages -->
            <div id="message" class="message"></div>

            <!-- Form -->
            <form id="holidayForm"  action="<?php echo site_url('admin/stuattendence/set_holidays') ?>"  method="post" accept-charset="utf-8">
                <!-- 1. Holiday Application Type -->
                <div class="form-group">
                    <label class="form-label" for="applicationTo">
                        🎯 Holiday Application Scope
                    </label>
                    <select class="form-input" id="applicationTo" name="holiday_applied_scope" required>
                        <option value="">Select Application Scope</option>
                        <option value="all_students">All Students</option>
                        <option value="particular_class">Particular Class</option>
                    </select>
                </div>

                <!-- Conditional Container for Class & Section -->
                <div class="conditional-container" id="classContainer">
                    <div class="conditional-title">Class Selection Details</div>
                    <div class="form-grid">
                        <!-- 2. Classes -->
                        <div class="form-group">
                                    <label><?php echo $this->lang->line('class'); ?></label><small class="req"> *</small>
                                    <select id="class_id" name="class_id" class="form-input" >
                                        <option value=""><?php echo $this->lang->line('select'); ?></option>
                                        <?php
                                        foreach ($classlist as $class) {
                                            ?>
                                            <option value="<?php echo $class['id'] ?>" <?php
                                            if (set_value('class_id') == $class['id']) {
                                                echo "selected=selected";
                                            }
                                            ?>><?php echo $class['class'] ?></option>
                                                    <?php
                                                }
                                                ?>
                                    </select>
                                    <span class="text-danger"><?php echo form_error('class_id'); ?></span>
                        </div>

                        <!-- 3. Sections -->
                        <div class="form-group">
                 <label for="exampleInputEmail1"><?php echo $this->lang->line('section'); ?></label><small class="req"> *</small>
                                    <select  id="section_id" name="section_id" class="form-input" >
                                        <option value=""><?php echo $this->lang->line('select'); ?></option>
                                    </select>
                                    <span class="text-danger"><?php echo form_error('section_id'); ?></span>
                        </div>
                    </div>
                </div>

                <!-- 4. Holiday Start Date -->
                <div class="form-group">
                    <label class="form-label" for="startDate">
                        📅 Holiday Starts From
                    </label>
                    <input type="date" class="form-input" id="startDate" name="startDate" required>
                    
                </div>

                <!-- 5. Holiday End Date -->
                <div class="form-group">
                    <label class="form-label" for="endDate">
                        📅 Holiday Ends On
                    </label>
                    <input type="date" class="form-input" id="endDate" name="endDate" required>
                </div>

                <!-- Submit Button -->
                <button type="submit" class="submit-btn" name="submit_holidays">
                    ✨ Apply Holiday                </button>
            </form>
        </div>
    </div>  
</div>


    <script>
        var class_id = '<?php echo set_value('class_id') ?>';
    var section_id = '<?php echo set_value('section_id') ?>';
    
        $(document).on('change', '#class_id', function (e) {
        $('#section_id').html("");
        var class_id = $(this).val();
        getSectionByClass(class_id, 0);
    });
    
        function getSectionByClass(class_id, section_id) {
        if (class_id != "") {
            $('#section_id').html("");
            var base_url = '<?php echo base_url() ?>';
            var div_data = '<option value=""><?php echo $this->lang->line('select'); ?></option>';

            $.ajax({
                type: "GET",
                url: base_url + "sections/getByClass",
                data: {'class_id': class_id},
                dataType: "json",
                beforeSend: function () {
                    $('#section_id').addClass('dropdownloading');
                },
                success: function (data) {
                    $.each(data, function (i, obj)
                    {
                        var sel = "";
                        if (section_id == obj.section_id) {
                            sel = "selected";
                        }
                        div_data += "<option value=" + obj.section_id + " " + sel + ">" + obj.section + "</option>";
                    });
                    $('#section_id').append(div_data);
                },
                complete: function () {
                    $('#section_id').removeClass('dropdownloading');
                }
            });
        }
    }
    
        // Get form elements
        const form = document.getElementById('holidayForm');
        const applicationTo = document.getElementById('applicationTo');
        const classContainer = document.getElementById('classContainer');
const classes = document.getElementById('class_id');
const sections = document.getElementById('section_id');

        const startDate = document.getElementById('startDate');
        const endDate = document.getElementById('endDate');
        const message = document.getElementById('message');

        // Show/hide class selection based on application scope
        applicationTo.addEventListener('change', function() {
            if (this.value === 'particular_class') {
                classContainer.classList.add('show');
                classes.required = true;
                sections.required = true;
            } else {
                classContainer.classList.remove('show');
                classes.required = false;
                sections.required = false;
                classes.value = '';
                sections.value = '';
            }
        });

        // Add focus effects to form inputs
        const formInputs = document.querySelectorAll('.form-input');
        formInputs.forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.classList.add('focused');
            });

            input.addEventListener('blur', function() {
                if (!this.value) {
                    this.parentElement.classList.remove('focused');
                }
            });
        });

        // Form submission
        // form.addEventListener('submit', function(e) {
        //     // e.preventDefault();
            
        //     // Validate dates
        //     if (startDate.value && endDate.value) {
        //         if (new Date(startDate.value) >= new Date(endDate.value)) {
        //             showMessage('Holiday end date must be after the start date!', 'error');
        //             return;
        //         }
        //     }

        //     // Collect form data
        //     const formData = {
        //         applicationTo: applicationTo.value,
        //         class: classes.value,
        //         section: sections.value,
        //         startDate: startDate.value,
        //         endDate: endDate.value
        //     };

        //     // Simulate form processing
        //     showMessage('Holiday settings applied successfully! 🎉', 'success');
        //     console.log('Holiday Data:', formData);
            
        //     // Optional: Reset form after success
        //     // setTimeout(() => form.reset(), 2000);
        // });

        // Show messages
        function showMessage(text, type) {
            message.textContent = text;
            message.className = `message ${type}`;
            
            // Auto hide after 5 seconds
            setTimeout(() => {
                message.style.display = 'none';
            }, 5000);
        }



        // Update end date minimum when start date changes
        startDate.addEventListener('change', function() {
            endDate.min = this.value;
            if (endDate.value && this.value >= endDate.value) {
                endDate.value = '';
            }
        });
    </script>